7 Replies Latest reply on Mar 19, 2009 1:04 PM by zjda

    Tree node style not correct on IE

    zjda

      Hi, I try to change style for components inside <rich:treeNode>.

      <rich:treeNode type="Text">
       <a4j:region>
       <rich:inplaceInput id="text_property" immediate="true" styleClass="property_value" selectOnEdit="true" editEvent="ondblclick" defaultLabel="Double Click to Edit" value="#{item.stringValue}" minInputWidth="200px" rendered="#{item.property.editable}">
       </rich:inplaceInput>
       <h:outputText value="#{item.stringValue}" styleClass="property_value" rendered="#{!item.property.editable}"/>
       </a4j:region>
      </rich:treeNode>
      


      <style>
      .property_value {
       font-weight: bolder;
      }
      </style>
      


      But IE (version 7) does not display the font correctly (for both <rich:inplaceInput> and <h:outText>) until I click IE Refresh button. FireFox works fine.

      Thanks,
      ZJ

        • 1. Re: Tree node style not correct on IE
          zjda

          Is it a bug or did I miss something?

          Is there any workaround if it is a bug?

          Thanks,
          ZJ

          • 2. Re: Tree node style not correct on IE
            ilya_shaikovsky

            sorry but can't confirm currently.

            <style>
            .property_value {
             font-weight: bolder;
            }
            </style>
             <p>This tree uses "ajax" switch type, note that for collapse/expand operations it will be Ajax request to the server.
             You may see short delay in this case.</p><br/>
             <h:form>
             <rich:tree style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}" componentState="#{userBean.state}">
             <rich:treeNode type="artist" iconLeaf="/images/tree/singer.gif" icon="/images/tree/singer.gif">
             <h:outputText value="#{item.name}" styleClass="property_value"/>
             </rich:treeNode>
             <rich:treeNode type="album" iconLeaf="/images/tree/disc.gif" icon="/images/tree/disc.gif">
             <h:outputText value="#{item.title}" />
             </rich:treeNode>
             <rich:treeNode type="song" iconLeaf="/images/tree/song.gif" icon="/images/tree/song.gif">
             <h:outputText value="#{item.title}" styleClass="property_value"/>
             </rich:treeNode>
             </rich:tree>
             <a4j:commandButton value="click" />
             </h:form>
            


            this code causes the same result for IE and FF. root nodes and song leafs has bold font.

            • 3. Re: Tree node style not correct on IE
              zjda

              Hi Ilya,

              Thank you for investigating the issue. I have narrowed down the problem. If the tree is in the <a4j:include>:

              <rich:panel id="mainFrame" style="vertical-align:top;margin:0px; padding:0px; height:450px; overflow: auto;">
               <a4j:include id="propertyviewer" viewId="/pages/#{navTree.view}" />
              </rich:panel>
              


              The style does NOT work. However, if I copy the code in the included file to replace the <a4j:include> tag, it will display the style correctly. Therefore, I think it is a bug.

              Regards,
              ZJ

              • 4. Re: Tree node style not correct on IE
                ilya_shaikovsky

                I've moved my sample to include. Still working. I'm using RF 3.3.1 snapshots.

                • 5. Re: Tree node style not correct on IE
                  zjda

                  Hi Ilya,

                  I was using 3.3.0 GA, but upgrading to richfaces-ui-3.3.1-20090318.084312-43.jar does not help. To reproduce the problem with your tree, I created a simple test case:

                  <f:view>
                   <h:panelGrid columns="2" columnClasses="colNav, colContent" width="100%">
                   <rich:panel id="navPanel" style="vertical-align:top; margin:0px; padding:0px; height:450px; width:100%; overflow: auto;">
                   <h:form id="treeform" >
                   <a4j:commandLink reRender="mainFrame" value="Refresh"/>
                   </h:form>
                   </rich:panel>
                  
                   <rich:panel id="mainFrame" style="vertical-align:top;margin:0px; padding:0px; height:450px; overflow: auto;">
                   <a4j:include id="includetree" viewId="/pages/includeTree.xhtml" />
                   </rich:panel>
                   </h:panelGrid>
                   </f:view>
                  


                  The "includeTree.xhtml" contains your code. Initially the tree node style is correct. However, when I click "Refresh" link, the tree is updated with wrong style.

                  Thanks,
                  ZJ

                  • 6. Re: Tree node style not correct on IE
                    ilya_shaikovsky

                    yes. reproduced.

                    but the same happens not for our components but just for simple html elements defined on the same page.

                    just define your styles not within reRendered zone but in the head or just in some external css file and add the link using loadStyle and the problem will be revealed.

                    • 7. Re: Tree node style not correct on IE
                      zjda

                      Thank you very much, Ilya.

                      Moving the style to the head solves the problem.

                      Regards,
                      ZJ