0 Replies Latest reply on May 13, 2012 5:04 AM by Karsten Wutzke

    Wrapping rich:treeNode if available horizontal space exceeded (CSS?)

    Karsten Wutzke Expert

      Hello,

       

      I have a tree of document nodes, which often go overboard with the available horizontal space in the browser:

      rich-tree-node-wrap.png

      Here's the code:

       

      {code:xml}<rich:treeNode type="doc"

                     iconExpanded="/resources/images/icons/#{treeNode.iconFileName}"

                     iconCollapsed="/resources/images/icons/#{treeNode.iconFileName}"

                     iconLeaf="/resources/images/icons/#{treeNode.iconFileName}"

                     id="doc-node">

       

        <h:selectBooleanCheckbox value="#{treeNode.inToc}" />

        <rich:inplaceInput value="#{treeNode.name}" />

        <h:outputText value="#{treeNode.fileName}" />

        <h:outputText value="#{treeNode.expiryDate}">

          <f:convertDateTime pattern="dd.MM.yyyy" />

        </h:outputText>

        <h:commandLink action="#{filePreviewer.createPreview(document)}" id="preview-button">

          <h:graphicImage library="images/icons" name="page_white_magnify.png" />

        </h:commandLink>

        <h:commandLink>

          <h:graphicImage library="images/icons" name="delete.png"  />

        </h:commandLink>

       

      </rich:treeNode>{code}

      What can I do to achieve that the nodes' elements won't be cut at the right but will instead wrap to the next line, much like CSS text wrap? It doesn't really matter where at first. I tried a few CSS properties like <rich:treeNode ... style="display: inline;"> but that doesn't work.

       

      To me the problem is that there's not only simple text involved. The desired behavior would probably be to wrap at the element that's exceeding the width.

       

      Can it be done, probably via CSS?

       

      Thanks

      Karsten

       

      PS: Another option would be to redesign the displayed elements, but this is not what I'm asking for right now.