Although this is an older post, it seems most appropriate for posting my issue. (I am using Version: 8.1.48)
Label wrapping works OK in the first level down in the Tree, but the second level does not wrap, so shows the scroll bar, and the first level then wraps to that width. I want the second level to wrap as well.
This is my current stylesheet.css:
* Direct stylesheet authoring is an advanced feature. Knowledge of CSS required.*/
/* from Useful CSS Stuff - #47 by nminchin */
/* edits to the Tree component to display long text on multiple lines */
.tree-item {
height: fit-content !important;
padding: 3px 0px; /*added this*/ /* or 1px 0px or 4px 0px */
}
.tree-item-label {
flex: unset !important;
flex-wrap: nowrap; /*added this*/
}
.tree .tree-item-label .label-wrapper{
align-items: start;
}
/*------------------------------------------------------------------------*/
/* also from Avoid horizontal scroll bar in tree component */
.tree-item-label .text-scroll {
white-space: pre-wrap !important;
}
/* If you want the icon and text to be vertically centred:*/
/*.label-wrapper.label-wrapper-icon {
margin: auto 0;
}*/
.label-wrapper.label-wrapper-text {
margin: auto 0;
}
/* ################################################### */
/* edits to the Tree component to display long text on multiple lines */
.text-scroll{
padding-top:2px;
overflow-wrap: break-word !important;
white-space:pre-wrap !important;
}
.label-wrapper-icon {
display: block !important;
/*margin: auto 0; /* display in the middle of the line height*/
padding-top: 4px;
}
.label-wrapper-text {
margin: auto 0; /* display in the middle of the line height*/
}
.terminal-alignment.last-child{
height: 16px !important;
}
.terminal-alignment .cross-alignment{
height: 16px !important;
}
/* END: edits to the Tree component to display long text on multiple lines */
/* ################################################### */
With only the first level expanded, this is the display:
When the second level is expanded, this is the display:
