# Avoid horizontal scroll bar in tree component

**URL:** <https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [June 7, 2024, 9:16am UTC](https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536 "2024-06-07T09:16:44Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [June 7, 2024, 9:16am UTC](https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536/1 "2024-06-07T09:16:44Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/1/f1d4d0e66c75b890eec2ca4b6b43689849683c30.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [June 7, 2024, 11:18am UTC](https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536/2 "2024-06-07T11:18:48Z")

</div>

> [@mmadariaga](#):
>
> ... jump to the next line.

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

---

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [June 7, 2024, 11:32am UTC](https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536/3 "2024-06-07T11:32:15Z")

</div>

Yes.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [June 8, 2024, 11:33pm UTC](https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536/4 "2024-06-08T23:33:05Z")

</div>

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

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

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/2/429c9b95b5967f1838d9a703bb9056bb2aa6deff.png)

If you want the icon and text to be vertically centred:

```python
.label-wrapper.label-wrapper-icon {
    margin: auto 0;
}
.label-wrapper.label-wrapper-text {
     margin: auto 0;
}

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/b/5b173b8ae1326015ab41e7657ef326bcc84e554b.png)

---

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [June 10, 2024, 3:17pm UTC](https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536/5 "2024-06-10T15:17:56Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/a/fa652fb674bef9f9abf5a5fc8adf99233a1a2353.png)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [June 10, 2024, 3:19pm UTC](https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536/6 "2024-06-10T15:19:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [June 10, 2024, 10:29pm UTC](https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536/7 "2024-06-10T22:29:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [June 11, 2024, 7:08am UTC](https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536/8 "2024-06-11T07:08:47Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/0/d05878852eaa60e6f252f67da2973afc0fc84ba6.png)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [June 11, 2024, 2:53pm UTC](https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536/9 "2024-06-11T14:53:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [June 11, 2024, 10:42pm UTC](https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536/10 "2024-06-11T22:42:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [June 13, 2024, 8:06am UTC](https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536/11 "2024-06-13T08:06:44Z")

</div>

Alright, I'm using 8.1.41.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [June 21, 2024, 3:43am UTC](https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536/12 "2024-06-21T03:43:41Z")

</div>

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

```python
/* ################################################### */
/* 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](https://forum.inductiveautomation.com/t/display-tree-item-with-multiple-lines/79779/8) with all help coming from @victordcq the 🧙

---

<div class="post-metadata">

**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\
**Post date:** [June 21, 2024, 6:18am UTC](https://forum.inductiveautomation.com/t/avoid-horizontal-scroll-bar-in-tree-component/91536/13 "2024-06-21T06:18:33Z")

</div>

Thanks, it works!! 🙂