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?
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.
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.
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!
“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.
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)
