PrimeFaces treeTable text not properly aligned because of expandable icon

Question

In the expandable row there is a " > " icon which shifts the span. When there is too much text inserted, the text is inserted into new line without proper alignment.

How can I move the start of the span via css so that the new text is located under the first row of text as such?

The generated HTML looks like this (minimal code sample):

<tr>
  <td>
  <span class="ui-treetable-indent"></span>
  <span class="ui-treetable-toggler ui-icon ui-icon-triangle-1-e ui-c"></span>
  <div>
    <span style="font-size: 1.1em !important; vertical-align: middle; ">
    Subrow2 with a lot of text asdasdasd asdasdqweqwdasdawdqdwqasdasdd
    </span>
  </div>
  </td>
</tr>

Here is span get placed when there is not too much text:

Answer 1

You are probably using an older version of PrimeFaces as this is not the case in the current showcase of PrimeFaces 12.

The solution PrimeTek choose was to not wrap text in a TreeTable. See this CSS rule of the components.css:

.ui-treetable thead th, .ui-treetable tbody td, .ui-treetable tfoot td {
    overflow: hidden;
    white-space: nowrap;
    ...
}

You could add this CSS rule (with a more specific selector) to your project. See How do I override default PrimeFaces CSS with custom styles?

If you don't want the text to wrap, you could set the cell with the toggler to flex. For example:

html body .ui-treetable .ui-treetable-data>tr>td:first-child {
    display: flex;
}

html body .ui-treetable .ui-treetable-data>tr>td .ui-treetable-toggler {
    flex-shrink: 0;
}