Avoid horizontal scroll bar in tree component

I've created a tree component with long labels. I'd like to limit the tree component's horizontal space: when the label exceeds the designated space, jump to the next line.

Do you mean "wrap text in tree item labels"?

Yes.

You can use this in your advanced stylesheet for force the tree item labels to wrap:

.tree-item-label .text-scroll {
    white-space: pre-wrap !important;
}

image

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;
}

image

3 Likes

This way? I still see no changes on the tree component, I don't know what I'm doing wrong :frowning:

If you're looking in the Designer, you must close the View and then re-open it for changes within stylesheet.css to take effect on the View.

1 Like

You can also change the theme in session props and then back again. Oh wait, maybe that's just for theme css files... Good to know re stylesheet

I've closed the View and even restarted Designer and I still can't manage to get it working.

Same. After putting the prescribed changes in place, I am not seeing the behavior you are showing, @nminchin .

Hmm, maybe I had to add something else as well.. I'm also on 8.1.22, I'll have a look in an hr or so

Alright, I'm using 8.1.41.