14 Replies Latest reply on Apr 1, 2009 2:11 PM by ashraj

    Height between tree nodes - Firefox 3.0

      I have a rich:tree with custom tree nodes with images of size 60*60. The tree display is fine in IE 7.0. However, on FireFox 3.0, the vettical distance between a parent node and child node does not take into account the number of children in the next level. So, the labels of the nodes in the first level overlap with the labels of the nodes in the second level causing a messy display.

        • 1. Re: Height between tree nodes - Firefox 3.0
          nbelaevski

          Hello,

          How did you customize the height?

          • 2. Re: Height between tree nodes - Firefox 3.0

            Thanks for your prompt response. I am using Richfaces 3.1.6 and this is how I have customized the height in the stylesheet.

            .rich-tree-node {
            white-space: normal;
            height: 60px;
            }
            .rich-tree-node-children {
            white-space: normal;
            height: 60px;
            }
            .dr-tree-h-text,.customNode,.rich-tree-node-text {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            color: #000000;
            font-weight: normal;
            font-size: 11px;
            align: left;
            }
            .treeIcon32 .dr-tree-h-ic-div {
            margin-left: 29px;
            padding-left: 31px;
            width:60px;
            height:60px;
            color:#000000;
            }
            .treeIcon32 .dr-tree-h-ic {
            width: 60px;
            padding: 0px;
            height : 60px;
            }
            .treeIcon32 .dr-tree-h-ic-img{
            width: 60px;
            height: 60px;
            margin-top: 10px;
            margin-bottom: 10px;
            }
            .dr-tree-h-ic-line-node, .dr-tree-h-ic-line-last, .dr-tree-h-ic-line-exp, .dr-tree-h-ic-line-clp{
            background-position: center;
            background-repeat: no-repeat;
            color:#000000;
            }
            .dr-tree-i-hl {
            color:#000000;
            }

            • 3. Re: Height between tree nodes - Firefox 3.0
              nbelaevski

              Most likely, this:

              .rich-tree-node-children {
              white-space: normal;
              height: 60px;
              }
              is the cause.

              • 4. Re: Height between tree nodes - Firefox 3.0

                I removed
                .rich-tree-node-children {
                white-space: normal;
                height: 60px;
                }

                from the style sheet, but it still shows up the same. Do I need to change the value to something else? Please let me know. Thanks! Would you like me to send a screenshot?

                • 5. Re: Height between tree nodes - Firefox 3.0
                  nbelaevski

                  Tree looks ok as I've removed definition for "rich-tree-node-children" class (tried under 3.3.1-snapshot). Please make sure that your changes were deployed correctly. Also can you please post page code, so that I can check how "treeIcon32" and "customNode" are applied.

                  • 6. Re: Height between tree nodes - Firefox 3.0

                    We are constrained to using RF 3.1.6 as we have to support Weblogic 9.x (JSF1.1). I would greatly appreciate your help in resolving this issue.

                    Following is the page code: The tree appears inside a collapsible panel which is rendered only once the data has been retrieved. I am using the styleClass customNode for the treeNode and treeIcon32 for the tree.

                    <t:collapsiblePanel>
                    ....
                    ....
                    ....

                    <t:div style="height:800px;width:800px;overflow:auto;">
                    <rich:tree id="tree"
                    switchType="#{subBackingBean.switchType}"
                    value="#{subBackingBean.data}"
                    var="item"
                    nodeFace="#{item.type}"
                    changeExpandListener="#{subBackingBean.onExpand}" nodeSelectListener="#{subBackingBean.onSelect}"
                    binding="#{subBackingBean.tree}"
                    ajaxSubmitSelection="true"
                    preserveModel="state" immediate="false"
                    iconLeaf="#{subBackingBean.iconLeaf}"
                    icon="#{subBackingBean.icon}"
                    styleClass="treeIcon32"
                    adviseNodeOpened="#{subBackingBean.adviseNodeExpanded}"
                    style="height:800px;width:800px">



                    <rich:treeNode id="rteTreeNode" type="#{subBackingBean.rteType}" nodeClass="customNode" acceptedTypes="none" icon="#{subBackingBean.rteIcon}" iconLeaf="#{subBackingBean.rteIcon}" dropListener="#{subBackingBean.processDrop}"
                    onselected="CloseContext();" oncomplete="CloseContext();" >
                    <h:outputText value="#{item.label}" />
                    <a4j:support event="oncontextmenu" action="#{subBackingBean.setPopupMenu}" onsubmit="setRenderPaste(false);ContextShow(event,'block','block');">

                    </a4j:support>
                    <a4j:support event="ondblclick" action="#{subBackingBean.onNodeDblClick}" oncomplete="javascript:Richfaces.showModalPanel('rteToNumDlg'); CloseContext();" reRender="rteToNumDlgDiv" />


                    </rich:treeNode>
                    <rich:treeNode type="#{subBackingBean.rootType}" nodeClass="customNode" acceptedTypes="#{item.acceptedTypes}" icon="#{item.rootIcon}" iconLeaf="#{item.rootIcon}" dropListener="#{subBackingBean.processDrop}"onselected="CloseContext();" oncomplete="CloseContext();">
                    <a4j:support event="oncontextmenu" action="#{subBackingBean.setPopupMenu}" onsubmit="setRenderPaste(#{(item.pasteAllowed)});ContextShow(event,'none','none');">

                    </a4j:support>
                    <h:outputText value="#{item.label}" />

                    </rich:treeNode>
                    <rich:treeNode type="#{subBackingBean.annType}" nodeClass="customNode" acceptedTypes="none" icon="#{subBackingBean.annIcon}" iconLeaf="#{subBackingBean.annIcon}" dropListener="#{subBackingBean.processDrop}" id="annId" onselected="CloseContext();" oncomplete="CloseContext();">
                    <a4j:support event="oncontextmenu" action="#{subBackingBean.setPopupMenu}" onsubmit="setRenderPaste(false);ContextShow(event,'block','block');">

                    </a4j:support>
                    <h:outputText id="annText" value="#{item.label}" />

                    <a4j:support event="ondblclick" action="#{subBackingBean.onNodeDblClick}" oncomplete="javascript:Richfaces.showModalPanel('annIDDlg');" reRender="annIDDlgDiv" />
                    </rich:treeNode>
                    <rich:treeNode type="#{subBackingBean.cpcType}" nodeClass="customNode" acceptedTypes="#{item.acceptedTypes}" icon="#{item.cpcIcon}" iconLeaf="#{item.cpcIcon}" dropListener="#{subBackingBean.processDrop}" onselected="CloseContext();" oncomplete="CloseContext();">
                    <a4j:support event="oncontextmenu" action="#{subBackingBean.setPopupMenu}" onsubmit=" setRenderPaste(#{(item.pasteAllowed)}); ContextShow(event,'block','block');">

                    </a4j:support>
                    <h:outputText id="cpcText" value="#{item.label}" />

                    <a4j:support event="ondblclick" action="#{subBackingBean.onNodeDblClick}" oncomplete="javascript:Richfaces.showModalPanel('cpcRteDlg');" reRender="cpcRteDlgDiv" />
                    </rich:treeNode>
                    <rich:treeNode type="#{subBackingBean.clgType}" nodeClass="customNode" acceptedTypes="#{item.acceptedTypes}" icon="#{item.clgIcon}" iconLeaf="#{item.clgIcon}" dropListener="#{subBackingBean.processDrop}"onselected="CloseContext();" oncomplete="CloseContext();">
                    <a4j:support event="oncontextmenu" action="#{subBackingBean.setPopupMenu}" onsubmit=" setRenderPaste(#{(item.pasteAllowed)}); ContextShow(event,'block','block');">

                    </a4j:support>
                    <h:outputText value="#{item.label}" />

                    <a4j:support event="ondblclick" action="#{subBackingBean.onNodeDblClick}" oncomplete="javascript:Richfaces.showModalPanel('geoRteDlg');" reRender="geoRteDlgDiv" />
                    </rich:treeNode>
                    <rich:treeNode type="#{subBackingBean.dbmType}" nodeClass="customNode" acceptedTypes="#{item.acceptedTypes}" icon="#{item.dbmIcon}" iconLeaf="#{item.dbmIcon}" dropListener="#{subBackingBean.processDrop}"onselected="CloseContext();" oncomplete="CloseContext();">
                    <a4j:support event="oncontextmenu" action="#{subBackingBean.setPopupMenu}" onsubmit=" setRenderPaste(#{(item.pasteAllowed)}); ContextShow(event,'block','block');">

                    </a4j:support>
                    <h:outputText value="#{item.label}" />

                    <a4j:support event="ondblclick" action="#{subBackingBean.onNodeDblClick}" oncomplete="javascript:Richfaces.showModalPanel('dbmRteDlg');" reRender="dbmRteDlgDiv" />
                    </rich:treeNode>


                    </rich:tree>
                    </t:div>
                    </rich:panel>



                    </h:panelGrid>
                    </rich:panel>

                    • 7. Re: Height between tree nodes - Firefox 3.0

                      ON FIREFOX 3.0- Child 12 label overlaps on top of Child21
                      Root----
                      Child11------
                      Child12 Child21-------
                      Child22-------

                      ON IE 7 - Child 12 shows up with the correct distance below Child 11
                      Root-----
                      Child11------
                      Child21-------
                      Child22-------
                      Child12--------

                      • 8. Re: Height between tree nodes - Firefox 3.0
                        ilya_shaikovsky

                        I just tried your css applied to our tree and reproduced the problem.

                        then I removed the class which Nick suggested and all started to looks fine. So doublecheck that it isn't a cache problem and also use firebug for future investigations.

                        • 9. Re: Height between tree nodes - Firefox 3.0

                          Ilya,
                          Thanks for looking into this problem. I have cleared the cache and removed the class from my CSS. Using firebug, I see the class rich-tree-node-children and rich-tree-node-cildren are applied to the "childs". Where are these classes defined? I could not find them in tree.xcss.
                          I still see the problem in Firefox.

                          • 10. Re: Height between tree nodes - Firefox 3.0
                            nbelaevski

                            What definition is applied to rich-tree-node-children: yours or not? Also check rendered CSS to exclude deployment issues.

                            • 11. Re: Height between tree nodes - Firefox 3.0

                              Nick,
                              I have not redefined rich_tree_node_children in my css. I am sorry, I do not understand what you mean by deployment issues. Please let me know.
                              Thanks

                              • 12. Re: Height between tree nodes - Firefox 3.0
                                nbelaevski

                                Sometimes my Eclipse doesn't deploy modified files to the server. That's what I meant. Just check in Firebug that your CSS definitions don't contain this class.

                                • 13. Re: Height between tree nodes - Firefox 3.0

                                  Thanks for the clarification. I looked through all the loaded css files in Firebug and none of them contain this class.

                                  • 14. Re: Height between tree nodes - Firefox 3.0

                                    My colleague found the problem
                                    treeIcon32 .dr-tree-h-ic-div {
                                    margin-left: 29px;
                                    padding-left: 31px;
                                    width:60px;
                                    height:60px; //REMOVE this line
                                    color:#000000;
                                    }

                                    Nick/Ilya - Thanks for all your help. The Richfaces framework is awesome!!