# \[BUG\]Perspective - OverflowX/Y not working as expected **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [May 11, 2023, 4:55am UTC](https://forum.inductiveautomation.com/t/bug-perspective-overflowx-y-not-working-as-expected/73576 "2023-05-11T04:55:09Z")\ **Posts on this page:** 4\ **Page:** 1
**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:** [May 11, 2023, 4:55am UTC](https://forum.inductiveautomation.com/t/bug-perspective-overflowx-y-not-working-as-expected/73576/1 "2023-05-11T04:55:09Z")
I have an embedded view in the screenshots below, where I'm changing the `view.root.style.overflowX` and `overflowY` values, as I want the horizontal overflow to be `visible` and the vertical to be `auto` so that the alert shows properly (it extends 5px beyond the bounds of the container that it's in using `margin: 0 -5px` so that it defeats the 5px margin applied to the whole container which pulls the rest of the components off of the edge of the outer panel container - I want the alert to actually touch the sides) Setting the `overflow: visible` works and doesn't display scrollbars, but the issue is that it also doesn't show scrollbars if the screen is too short... so I want the vertical scrollbar to show and not the horz. `view.root.styles` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/3/a367bc96c62527d60c3a632c81118b2612e6faec.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/0/1004f0806e2474bd189d5f89932d52b2a1e30a5c.png) If I instead change the style to `overflowX: visible` (and `overflowY: auto` - presumably the default is `auto` though, however I've tried both defining and not-defining it), then I get scrollbars in both directions 😕 `view.root.styles` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/9/69d4e673c927729c13c1eaec73e649de00b8435b.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/7/072dbf4377e7d5c0071a80060b3b4d180e974545.png) Basic View definition to demonstrate. Note that setting `overflowX/Y/Blank` to `visible` all do exactly the same thing. ```auto { "custom": {}, "params": {}, "props": { "defaultSize": { "height": 428, "width": 446 } }, "root": { "children": [ { "children": [ { "meta": { "name": "Label" }, "position": { "basis": "60px", "shrink": 0 }, "props": { "style": { "backgroundColor": "#BCF7AB", "margin": "0 -15px" }, "text": "Alert Banner" }, "type": "ia.display.label" }, { "meta": { "name": "Label_0" }, "position": { "basis": "60px", "shrink": 0 }, "props": { "text": "Item" }, "type": "ia.display.label" }, { "meta": { "name": "Label_1" }, "position": { "basis": "60px", "shrink": 0 }, "props": { "text": "Item" }, "type": "ia.display.label" }, { "meta": { "name": "Label_2" }, "position": { "basis": "60px", "shrink": 0 }, "props": { "text": "Item" }, "type": "ia.display.label" }, { "meta": { "name": "Label_3" }, "position": { "basis": "60px", "shrink": 0 }, "props": { "text": "Item" }, "type": "ia.display.label" } ], "meta": { "name": "Overflow" }, "position": { "basis": "200px", "grow": 1 }, "props": { "direction": "column", "style": { "backgroundColor": "#E0D6BD", "margin": "15px", "overflow": "visible" } }, "type": "ia.container.flex" }, { "children": [ { "meta": { "name": "Label" }, "position": { "basis": "60px", "shrink": 0 }, "props": { "style": { "backgroundColor": "#BCF7AB", "margin": "0 -15px" }, "text": "Alert Banner" }, "type": "ia.display.label" }, { "meta": { "name": "Label_0" }, "position": { "basis": "60px", "shrink": 0 }, "props": { "text": "Item" }, "type": "ia.display.label" }, { "meta": { "name": "Label_1" }, "position": { "basis": "60px", "shrink": 0 }, "props": { "text": "Item" }, "type": "ia.display.label" }, { "meta": { "name": "Label_2" }, "position": { "basis": "60px", "shrink": 0 }, "props": { "text": "Item" }, "type": "ia.display.label" }, { "meta": { "name": "Label_3" }, "position": { "basis": "60px", "shrink": 0 }, "props": { "text": "Item" }, "type": "ia.display.label" } ], "meta": { "name": "OverflowX" }, "position": { "basis": "200px", "grow": 1 }, "props": { "direction": "column", "style": { "backgroundColor": "#E0D6BD", "margin": "15px", "overflowX": "visible", "overflowY": "auto" } }, "type": "ia.container.flex" } ], "meta": { "name": "root" }, "props": { "direction": "column" }, "type": "ia.container.flex" } } ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/c/ac7c457ac5695b6cda73f441532654cd989c4173.png) Just to clarify, what I expect in this screenshot in the bottom container is for the alert banner to look like the top version (since overflowX = visible) ( ❌), and there be a vertical scrollbar (which there is, ✅) ---
**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\ **Post date:** [May 11, 2023, 5:29am UTC](https://forum.inductiveautomation.com/t/bug-perspective-overflowx-y-not-working-as-expected/73576/2 "2023-05-11T05:29:53Z")
I actually ran into this same headache when building a custom table view. I eventually stumbled across a [SO post](https://stackoverflow.com/questions/11520728/overflow-yvisible-not-working-when-overflow-xhidden-is-present) that indicated this is a CSS bug. ---
**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:** [May 11, 2023, 5:32am UTC](https://forum.inductiveautomation.com/t/bug-perspective-overflowx-y-not-working-as-expected/73576/3 "2023-05-11T05:32:12Z")
well... looks like that bug has been a bug since before CSS existed ☹ ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/b/0b85b59c750a1fa3dc2c2dbe6729142f003be682.png) it's good to know though, cheers. I guess I'll just hope that no one opens a clients on a stupidly short screen..... ---
**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\ **Post date:** [May 11, 2023, 6:02am UTC](https://forum.inductiveautomation.com/t/bug-perspective-overflowx-y-not-working-as-expected/73576/4 "2023-05-11T06:02:57Z")
Ha yeah, I wouldn't hold my breath on a fix! It wouldn't be ideal, but you could nest everything in an additional view that is sized large enough to not trigger a horizontal scroll. You set your current views to visible and then that would allow you to get it so that just the y direction scrolls in this parent view. Probably not worth the hassle.