Avoid horizontal scroll bar in tree component

Ignition
,
1

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.

image
image1245×817 13.8 KB

2

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

3

Yes.

4

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
5

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

image
image1691×565 49.2 KB

6

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
7

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

8

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

image
image486×1028 43.6 KB

9

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

10

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

11

Alright, I'm using 8.1.41.

12

Sorry it's taken so long, this is the web of CSS that I have for this...

/* ################################################### */
/* edits to the Tree component to display long text on multiple lines */
.tree-item {
    height: fit-content !important;
    padding: 4px 0px; /*added this*/
}
.tree-item-label {
    flex: unset !important;
    flex-wrap: nowrap; /*added this*/
}
.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*/
}
.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;
}
.tree .tree-item-label .label-wrapper{
	align-items: start;
}
/* END: edits to the Tree component to display long text on multiple lines */
/* ################################################### */

This all comes from this post with all help coming from @victordcq the :mage:

3 Likes
13

Thanks, it works!! :slight_smile: