# \[IGN-9406\] Scroll-bar/Overflow Frustrations on Perspective View Canvas

**URL:** <https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [March 7, 2024, 11:02pm UTC](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998 "2024-03-07T23:02:44Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![dustin.cooper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dustin.cooper/32/29963_2.png) [@dustin.cooper](https://forum.inductiveautomation.com/u/dustin.cooper)\
**Post date:** [March 7, 2024, 11:02pm UTC](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/1 "2024-03-07T23:02:44Z")

</div>

Hi All,

I've opened a support ticket about this, but I thought I would also post this to the forum community (and the resident CSS wizards!) because this seems like an interesting problem

Ignition: 8.1.32  
Browser: Chrome 122.0.6261.95

I have an X-Y coord (fixed) container with an image component and a view canvas overlaid on it. The image component displays an SVG background image for a plant operation and the view canvas displays instances of plant data points. In this example, the instances are essentially arrows that show conveyor status and direction. When a user hovers over any instance a style called "x2" (defined in stylesheet.cs) transforms the arrow, essentially magnifying it by 200%.

> **x2 style class**
>
> ```auto
> .psc-x2 { transition: all .2s ease-in-out; }
> .psc-x2:hover { transform: scale(2) !important; z-index: 5;}
> 
> ```

Problem:

When the user hovers over these arrows in the client and the symbol magnifies, the client adds horiz and vert scroll-bars.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/7/77ca86467798c7ba1530ba7143cc091a8309bedd.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/9/599b817fb4c8250efbc713eaf722bb76bf5deec2.png)

This occurs even though, for each instance in the view canvas, the style prop has `overflow: hidden` as an attribute, as does the root container of the embedded view definition.

If I drop instances of this view as "loose" embedded views onto a view (ie not in a view canvas), then these scroll bars do not appear when the "x2" style hover transform is activated. The embedded view behaves properly.

If I inspect the browser dev tools in Chrome and dig into the view canvas div element, I can see that there is an `overflow: auto` attribute added that would explain the scroll-bars on magnify, but I have no idea where this attribute is coming from. You can see in the screenshot below that the position, height, width, top, left, bottom, and right attributes from the instance props match the instance div in the browser, but the `overflow: hidden` in the instance style prop is applied one layer "down" in a child div element.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/1/c129792869230b25c6f676b63b8cdd2ab6fefa2d.png)

So, the million dollar question is: where does the `overflow: auto` come from? - and is there any way to override this at runtime, either by css injection on the view canvas component, or in the stylesheet.css file?

---

<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:** [March 7, 2024, 11:17pm UTC](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/2 "2024-03-07T23:17:05Z")

</div>

You're setting overflow for the _instance_, but not the underlying View being instanced.

In theory, there may be situations where _Views_ allow for overflow:visible, but a View Canvas may want to prevent that behavior. Consider modifying the View (and/or the Coordinate Container) being instanced to have an overflow of "hidden".

---

<div class="post-metadata">

**Author:** ![dustin.cooper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dustin.cooper/32/29963_2.png) [@dustin.cooper](https://forum.inductiveautomation.com/u/dustin.cooper)\
**Post date:** [March 7, 2024, 11:33pm UTC](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/3 "2024-03-07T23:33:53Z")

</div>

So I've tried setting the underlying view's root container (flex-row) overflow to both hidden and visible, but it doesn't affect that phantom overflow: auto that I see in the browser dev tools, nor does either get rid of those unwanted scroll-bars.

---

<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:** [March 7, 2024, 11:36pm UTC](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/4 "2024-03-07T23:36:13Z")

</div>

In your screenshot, the View being instanced is a Coordinate Container - so the call-out of "flex-row" raises warning flags.

---

<div class="post-metadata">

**Author:** ![dustin.cooper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dustin.cooper/32/29963_2.png) [@dustin.cooper](https://forum.inductiveautomation.com/u/dustin.cooper)\
**Post date:** [March 7, 2024, 11:38pm UTC](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/5 "2024-03-07T23:38:07Z")

</div>

You're right, I misspoke. I added a second layer of embedding to try and troubleshoot this. So the view in the view canvas instances is a coord container (with padding) around an embedded view, which itself is a flex-row container.

---

<div class="post-metadata">

**Author:** ![dustin.cooper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dustin.cooper/32/29963_2.png) [@dustin.cooper](https://forum.inductiveautomation.com/u/dustin.cooper)\
**Post date:** [March 7, 2024, 11:40pm UTC](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/6 "2024-03-07T23:40:34Z")

</div>

In any case, setting the overflow to visible or hidden on _all_ root containers doesn't have any effect on the `overflow: auto` seen in my screenshot.

---

<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:** [March 7, 2024, 11:53pm UTC](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/7 "2024-03-07T23:53:22Z")

</div>

Here's what I found while trying to replicate once I had the rules in place in `stylesheet.css`, a Style named "x2", and an icon placed within a Coordinate Container, and the Style applied to the Icon...

As soon as I hovered over the Icon -\> Scrollbars (Icon).  
I specified the overflow of the Icon to be `hidden`.  
I Hovered over the Icon again -\> Scrollbars (Coordinate container).  
I specified the overflow of the parent container (Coordinate) to be `hidden`.  
I hovered over the Icon again -\> No scrollbars.  
I placed a View Canvas in another View, specified an instance should be of my View ("SVG"), and entered Preview mode.  
I hovered over the View Canvas instance of my SVG View -\> No scrollbars.

Nesting your Icon in a Container, then embedding that View by using an Embedded View within a flex layout View, and then instancing that flex layout View in a View Canvas is layers on layers of troubleshooting you don't want. Simplify, then try to replicate again. I've verified my recommendation works, and any successful replication on your end would likely point to an improper specification of overflow somewhere along your embedding/nesting structure.

I've attached a simplified project which should show this working as expected within the `View` View.  
[ViewCanvas.zip](https://forum.inductiveautomation.com/uploads/short-url/1FygpJnY6rilpqE4pXvoAIdNMKl.zip) (8.3 KB)

---

<div class="post-metadata">

**Author:** ![dustin.cooper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dustin.cooper/32/29963_2.png) [@dustin.cooper](https://forum.inductiveautomation.com/u/dustin.cooper)\
**Post date:** [March 8, 2024, 6:10pm UTC](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/8 "2024-03-08T18:10:11Z")

</div>

Thanks for sending this test project. Your example does indeed not show scrollbars when embedded in a view canvas and hovered over.

I did expand upon your example and copied your "SVG" view into a new view called "SVG\_1". The only difference on this view is that I set the root container and icon style properties to use `overflow: visible` rather than `hidden`, as this is actually the desired behavior for the hover style. (I know I used `hidden` in my OP, blame that on my lack of CSS knowledge).

I then added an instance to the view canvas of "SVG\_1" and went into preview mode.  
Hover over instance 0 (hidden) --\> no scroll bars  
Hover over instance 1 (visible) --\> scroll bars  
Change instance 1 style props to `overflow: visible`  
Hover over instance 1 --\> scroll bars

I then added an embedded view of SVG to `View` view  
Hover over SVG --\> no scroll-bars, cropped on hover  
I then added an embedded view of SVG\_1 to `View` view  
Hover over SVG\_1 --\> no scroll-bars, not cropped on hover (desired behavior)

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

I then inspected all 4 of the above elements and highlighted the differences in the `<div>`s in the below screenshot. You can see that, in the view canvas instances, that there is an `overflow: auto` attribute added that is not accounted for in the instance properties or the embedded view definitions themselves.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/c/6ce1d77b1676511119d4f28852e171d442f70482.png)

From the side-by-side comparisons, you can see that this `overflow: auto` that is somehow inserted into the view canvas instances is causing the unwanted scroll-bars and, for my use case, is making the view canvas unusable.

Attaching my modified project from your example.  
[ViewCanvas\_2024-03-08\_1754.zip](https://forum.inductiveautomation.com/uploads/short-url/pi0WLsGJmJeA0S2vfnkdhrhs7Na.zip) (24.5 KB)

---

<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:** [March 8, 2024, 6:36pm UTC](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/9 "2024-03-08T18:36:36Z")

</div>

Ah, I see the issue now.

**Bad news:**  
Yep, it appears to be a bug, in that we're applying `ViewCanvas.props.instances[X].style.overflow` to the container which is the root of the instanced View instead of properly applying that overflow to the wrapping `<div>`.

**Good news:**  
I have a one-off workaround. Apply a `domId` property to the META category of your ViewCanvas, and supply some unique value ("MyViewCanvas" in the upcoming example). Now modify your stylesheet a bit:

```auto
div#MyViewCanvas > div {
	overflow: visible !important;
}

.psc-x2 { transition: all .2s ease-in-out; }
.psc-x2:hover { transform: scale(2) !important; z-index: 5;}

```

This rule will only be applied to this View Canvas, so you mileage may vary. If you need it to apply elsewhere, you can either add a new targeted rule, or lossen up the locator I've supplied.

---

<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:** [March 8, 2024, 6:42pm UTC](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/10 "2024-03-08T18:42:09Z")

</div>

I've opened an internal ticket to get this resolved, though we are absolutely slammed and I am unable to provide any sort of estimate on when it would indeed be picked and resolved.

---

<div class="post-metadata">

**Author:** ![dustin.cooper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dustin.cooper/32/29963_2.png) [@dustin.cooper](https://forum.inductiveautomation.com/u/dustin.cooper)\
**Post date:** [March 8, 2024, 6:45pm UTC](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/11 "2024-03-08T18:45:03Z")

</div>

> [@cmallonee](#):
>
> ```auto
> div#MyViewCanvas > div {
> overflow: visible !important;
> }
> 
> ```

This did the trick. I will go ahead and mark this as a solution, even if it is just a work-around. Saved me from having to stumble upon the workaround myself. Thank you!!

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/4/24022e52492083f82e63dec0ded3cf216dff88e6.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:** [March 8, 2024, 6:46pm UTC](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/12 "2024-03-08T18:46:06Z")

</div>

Oh, could I get the support ticket number please? I'll attempt to update that as well while I'm on it.

---

<div class="post-metadata">

**Author:** ![dustin.cooper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dustin.cooper/32/29963_2.png) [@dustin.cooper](https://forum.inductiveautomation.com/u/dustin.cooper)\
**Post date:** [March 8, 2024, 6:46pm UTC](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/13 "2024-03-08T18:46:31Z")

</div>

[https://support.inductiveautomation.com/hc/en-us/requests/107838](https://support.inductiveautomation.com/hc/en-us/requests/107838)