# Remove scroll bars from container

**URL:** <https://forum.inductiveautomation.com/t/remove-scroll-bars-from-container/70311>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 24, 2023, 8:32pm UTC](https://forum.inductiveautomation.com/t/remove-scroll-bars-from-container/70311 "2023-02-24T20:32:44Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daniel\_Wade](https://avatars.discourse-cdn.com/v4/letter/d/3e96dc/32.png) [@Daniel\_Wade](https://forum.inductiveautomation.com/u/Daniel_Wade)\
**Post date:** [February 24, 2023, 8:32pm UTC](https://forum.inductiveautomation.com/t/remove-scroll-bars-from-container/70311/1 "2023-02-24T20:32:44Z")

</div>

Is there a way to remove the scroll bars from a container? I've created a view with a column container to hold 3 labels horizontally. I am then using a 2nd view with a flex repeater to duplicate the 1st view. However, I cannot get the scroll bars to disappear.

I've set the height to match the label size and toggle every option I can find and it won't go away. I also see where if the container is stretched past the length to remove the vertical scroll bar, as soon as it decreases any, it comes right back telling me there is a value somewhere that is getting set.

Sorry if this is simple question. Thanks.

 ![scrollbar image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/c/7cc9e344f97cda3edcb266ec379eb2abe6ffd52d.jpeg)

---

<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:** [February 24, 2023, 8:38pm UTC](https://forum.inductiveautomation.com/t/remove-scroll-bars-from-container/70311/2 "2023-02-24T20:38:41Z")

</div>

Are the labels in a flex container? Or maybe they're in a coord container. If this isn't going into a coord container, it would make more sense to use a flex container instead. If it's going in a coord container though, a flex won't resize as you'd expect.

If it's in a coord then you can set the style.overflow to hidden

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [February 24, 2023, 8:41pm UTC](https://forum.inductiveautomation.com/t/remove-scroll-bars-from-container/70311/3 "2023-02-24T20:41:32Z")

</div>

```auto
overflow : hidden

```

---

<div class="post-metadata">

**Author:** ![Daniel\_Wade](https://avatars.discourse-cdn.com/v4/letter/d/3e96dc/32.png) [@Daniel\_Wade](https://forum.inductiveautomation.com/u/Daniel_Wade)\
**Post date:** [February 27, 2023, 1:40pm UTC](https://forum.inductiveautomation.com/t/remove-scroll-bars-from-container/70311/4 "2023-02-27T13:40:15Z")

</div>

I changed the labels to a flex container and that fixed the scroll issue, but caused several other alignment issues. I'm going to work with this and see if I can get it working. Thank you for the input

---

<div class="post-metadata">

**Author:** ![Daniel\_Wade](https://avatars.discourse-cdn.com/v4/letter/d/3e96dc/32.png) [@Daniel\_Wade](https://forum.inductiveautomation.com/u/Daniel_Wade)\
**Post date:** [February 27, 2023, 1:41pm UTC](https://forum.inductiveautomation.com/t/remove-scroll-bars-from-container/70311/5 "2023-02-27T13:41:38Z")

</div>

Is it possible to add "overflow: hidden" as an attribute or are you talking about on the flex repeater?

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [February 27, 2023, 1:59pm UTC](https://forum.inductiveautomation.com/t/remove-scroll-bars-from-container/70311/6 "2023-02-27T13:59:55Z")

</div>

There are various places it can be added as a property, some of them may do nothing. It's CSS, you can add it under the "Styles" section. Just do some trial and error to see if gets the results you're looking for.

---

<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:** [February 27, 2023, 5:00pm UTC](https://forum.inductiveautomation.com/t/remove-scroll-bars-from-container/70311/7 "2023-02-27T17:00:38Z")

</div>

You'll want to set `ColumnContainer.props.style.overflow` to have a value of "hidden". Even doing this, you will still probably see the scrollbars _in the Designer_ because we have to be able to convey that the `root` node has additional content while in the Designer context. Entering Preview mode or using a Browser session should remove the scrollbars.

---

<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:** [February 28, 2023, 12:17am UTC](https://forum.inductiveautomation.com/t/remove-scroll-bars-from-container/70311/8 "2023-02-28T00:17:34Z")

</div>

> [@Daniel\_Wade](#):
>
> changed the labels to a flex container and that fixed the scroll issue, but caused several other alignment issues

This is why I said

> [@nminchin](#):
>
> If it's going in a coord container though, a flex won't resize as you'd expect.

A flex container inside of a coord container will scale/resize the flex container, but the components within the flex container _will not scale_ themselves, they'll just rearrange themselves to suit the new flex container size. I'm not sure if there's a solution to this, but I'm definitely interested if there is!! For now, I avoid using flex containers inside of coord containers altogether, unless scaling of the components inside of them is not desired, like a HUD perhaps.
