3 Replies Latest reply on Oct 11, 2012 11:30 AM by Fabrício Severo

    Tree with multiline nodes

    laurentg Newbie

      Hello,

       

      I'm using RichFaces 3.3.3 and I would like to have a tree where a node can be wrapped on many lines.

      Unfortunately, if I do this, the layout gets completely broken.

      Have you any tips to do this ?

       

      Thanks for your help,

       

      Laurent

        • 1. Tree with multiline nodes
          Ilya Shaikovsky Master

          I was able to do that using

           

          .rich-tree-node-text {

              display: table;

              white-space: normal;

              width: 150px;

          }

           

          css declared for example.

           

          attached image with th result

          tree wrap.png

          Consider playing with firebug more to make any changes and see the result quickly.

          1 of 1 people found this helpful
          • 2. Re: Tree with multiline nodes
            laurentg Newbie

            Thank you. That was helpful but I also had to add this :

             

            .rich-tree-h-ic-line-node,
            .rich-tree-h-ic-line-exp,
            .rich-tree-h-ic-line-clp,
            .rich-tree-h-ic-line-last {
                vertical-align: middle;    
            }
            

             

            With both CSS customization, it seems to work nicely.

            • 3. Re: Tree with multiline nodes
              Fabrício Severo Newbie

              I'm using richfaces 4.2.2 and i wish to do that multiline text at my rich:tree

               

              Is there a way of making that code using the "style" attribute on rich:tree or rich:treeNode? I'm actualy new to css... don't know how to use it right. Where should i put that codes?

               

              I'm managed to break the lines using this:

               

              <rich:treeNode iconCollapsed="#{node.iconPath}"
                                    iconExpanded="#{node.iconPath}"
                                    iconLeaf="#{node.iconPath}"
                                    style="display: table; white-space: normal; width: 95%; #{node.partialParse()}">
                  #{node}
              </rich:treeNode>
              

               

              But the tree is lookign awkward. With icon below the "+" and text below the icon.