# \[Resolved\]Perfect fit in development - Inconsistent scroll bars in production, using same resolution

**URL:** <https://forum.inductiveautomation.com/t/resolved-perfect-fit-in-development-inconsistent-scroll-bars-in-production-using-same-resolution/22690>\
**Category:** Ignition Early Access\
**Created:** [February 19, 2019, 9:22pm UTC](https://forum.inductiveautomation.com/t/resolved-perfect-fit-in-development-inconsistent-scroll-bars-in-production-using-same-resolution/22690 "2019-02-19T21:22:11Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![hunterdg](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hunterdg/32/67774_2.png) [@hunterdg](https://forum.inductiveautomation.com/u/hunterdg)\
**Post date:** [February 19, 2019, 9:22pm UTC](https://forum.inductiveautomation.com/t/resolved-perfect-fit-in-development-inconsistent-scroll-bars-in-production-using-same-resolution/22690/1 "2019-02-19T21:22:11Z")

</div>

Hello,  
I am developing at 1920x1080 in coordinate layout views, using fixed positioning (pixel vs percent). Occasionally I run into an issue where the production environment (fullscreen 1920x1080 Chrome Kiosk on Linux) introduces scrollbars to my views. This is frustrating as I purposely develop/test (via remote desktop) in the same resolution as the desired production environment. I know i can develop in Flex views, but I’m not quite ready to make that leap.

In the attached example, I am using a Flex Repeater \> 3x “Line” template, and the Line template itself has Flex Repeater \> 3x “Hopper” template. The Line template is 270x360 and the Flex Repeater is 810x360. There are inconsistent scrollbars - first instance has none, second instance has scroll bars along the bottom (for each sub-instance of the Hopper template), and third has those and a vertical scrollbar on just one of the Hopper instances.

When testing this view in fullscreen Chrome via an 1920x1080 RDP connection to my development machine, I get no scrollbars. Everything fits in its place perfectly. Of course in the Ignition Designer, there are scrollbars everywhere.

Is there a way to disable scrollbars or an explanation for this behavior?

 ![37%20PM](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/a2c8a05e0e68a6f10cccaf3b22f6d6ed6165373e.png)

---

<div class="post-metadata">

**Author:** ![Carl.Gould](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/carl.gould/32/7262_2.png) [@Carl.Gould](https://forum.inductiveautomation.com/u/Carl.Gould)\
**Post date:** [February 20, 2019, 8:47pm UTC](https://forum.inductiveautomation.com/t/resolved-perfect-fit-in-development-inconsistent-scroll-bars-in-production-using-same-resolution/22690/2 "2019-02-20T20:47:12Z")

</div>

Maybe you could attach the view(s) here so we can take a better look and see what’s going on?

---

<div class="post-metadata">

**Author:** ![hunterdg](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hunterdg/32/67774_2.png) [@hunterdg](https://forum.inductiveautomation.com/u/hunterdg)\
**Post date:** [February 21, 2019, 2:10am UTC](https://forum.inductiveautomation.com/t/resolved-perfect-fit-in-development-inconsistent-scroll-bars-in-production-using-same-resolution/22690/3 "2019-02-21T02:10:10Z")

</div>

Just Sent via PM Just Sent via PM

---

<div class="post-metadata">

**Author:** ![Sanderd17](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sanderd17/32/8735_2.png) [@Sanderd17](https://forum.inductiveautomation.com/u/Sanderd17)\
**Post date:** [February 21, 2019, 7:48am UTC](https://forum.inductiveautomation.com/t/resolved-perfect-fit-in-development-inconsistent-scroll-bars-in-production-using-same-resolution/22690/4 "2019-02-21T07:48:05Z")

</div>

I see you have one template with a vertical scroll bar. This causes to reduce the remaining space, so causing horizontal scroll bars on all components.

The key here is to make sure a vertical scroll bar doesn’t appear. Then you will avoid the horizontal ones.

I’ve seen, with other browser projects, that this sometimes depends on the initialisation order. So it’s best to calculate some margin.

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [February 25, 2019, 9:06pm UTC](https://forum.inductiveautomation.com/t/resolved-perfect-fit-in-development-inconsistent-scroll-bars-in-production-using-same-resolution/22690/5 "2019-02-25T21:06:43Z")

</div>

> Of course in the Ignition Designer, there are scrollbars everywhere.

This immediately stands out to me. This shouldn't be the case. It should look practically the same while in preview mode. Can you tell why you are seeing scrollbars everywhere in the designer?

Overall, I would recommend trying not to have your views so densely packed that a few surprise pixels might result in content overflow and scrollbars (unless you're actively managing overflow in various ways). The quality overlays themselves will add a few pixels if the quality of your data is anything but good. You're getting scrollbars simply because your content is overflowing outside of it's container. As far as I can tell, it appears to be a combination of your border named style and the length of the loaded SKU. If you want to prevent scrollbar's entirely, you can set an `overflow` style property on containers to `hidden`. I would only do this if you're absolutely certain that anything that overflows outside of the container is not of interest to the end user, assuming the user has the ability to scroll.

Scrollbars are tricky, and whether they are shown can sometimes vary based upon OS, OS settings, browsers, and a combination of all three. The monitor resolution shouldn't make a difference because your parent container isn't configured to grow or shrink based upon the viewport dimensions, assuming `DF Hoppers Wide` is your primary view.

-Yousuf

---

<div class="post-metadata">

**Author:** ![hunterdg](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hunterdg/32/67774_2.png) [@hunterdg](https://forum.inductiveautomation.com/u/hunterdg)\
**Post date:** [February 26, 2019, 4:02pm UTC](https://forum.inductiveautomation.com/t/resolved-perfect-fit-in-development-inconsistent-scroll-bars-in-production-using-same-resolution/22690/6 "2019-02-26T16:02:25Z")

</div>

Thank you very much for your feedback. I will look in to your suggestions!

---

<div class="post-metadata">

**Author:** ![hunterdg](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hunterdg/32/67774_2.png) [@hunterdg](https://forum.inductiveautomation.com/u/hunterdg)\
**Post date:** [February 26, 2019, 4:36pm UTC](https://forum.inductiveautomation.com/t/resolved-perfect-fit-in-development-inconsistent-scroll-bars-in-production-using-same-resolution/22690/7 "2019-02-26T16:36:23Z")

</div>

With your help, I found a couple overlay-opt-outs that were not checked, but for now, I deselected all the overlay-opt-outs and used the overflow : hidden style property on the sub-sub view root. Working well!

Can you advise how to allow my view to grow?

I’m developing for non-interactive “Control Room” overhead screens where bad data quality notification is desired, but not at the expense of overflow. Thanks very much!

---

<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 26, 2019, 5:45pm UTC](https://forum.inductiveautomation.com/t/resolved-perfect-fit-in-development-inconsistent-scroll-bars-in-production-using-same-resolution/22690/8 "2019-02-26T17:45:53Z")

</div>

“Growing” a View in a Coordinate Container is an extremely complicated task and will not be able to accommodate quality overlays as you can’t directly access their attributes (because the View has no idea they’re even in place). If you need a View which expands/collapses as internal components take up more or less space, then you should be using a Flex Container.

If you’re determined to do this in a Coordinate Container, each Embedded View will need to have params in place which refer to the internal View’s dimensions. In the internal View, you’ll need to have **outgoing** params with their values bound to some calculation you’re running to determine how much space is needed for all of the components in the View.

---

<div class="post-metadata">

**Author:** ![hunterdg](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hunterdg/32/67774_2.png) [@hunterdg](https://forum.inductiveautomation.com/u/hunterdg)\
**Post date:** [February 26, 2019, 5:47pm UTC](https://forum.inductiveautomation.com/t/resolved-perfect-fit-in-development-inconsistent-scroll-bars-in-production-using-same-resolution/22690/9 "2019-02-26T17:47:19Z")

</div>

Thanks! I’ve just taken the leap into Flex containers.

---

<div class="post-metadata">

**Author:** ![hunterdg](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hunterdg/32/67774_2.png) [@hunterdg](https://forum.inductiveautomation.com/u/hunterdg)\
**Post date:** [February 26, 2019, 10:16pm UTC](https://forum.inductiveautomation.com/t/resolved-perfect-fit-in-development-inconsistent-scroll-bars-in-production-using-same-resolution/22690/10 "2019-02-26T22:16:37Z")

</div>

Well, this post did help me resolve the scrollbar issue, and also thankfully led me to learn Flex Views/development, which should probably be my default from now on, but after-the-fact, I remembered that I had enabled the “Overlay Scrollbars” Google Chrome experiment in chrome://flags, which hides scrollbars until the end user starts to scroll…

So I’ve been deluding myself for the past couple months, and the original rationale for making this post was user error.

Nonetheless, I appreciate the opportunity to learn. Apologies for my regrettably “typical end-user - blame-the-software” approach and thanks very much for the help.

(I’m primarily a Mac user and “hide scrollbars” is a system-wide setting on Macs, which I always enable out-of-the-box, so wanted the same experience on Chrome in Windows)
