Horizontal scroll when overlay appears inside flex container

Ignition Early Access
1

When I embed a cylindrical tank in a flex (column) component view, I get a horizontal scroll bar whenever there is an error (such as dead Modbus) in the cylindrical tank. It appears the exclamation mark in the upper-right-hand corner of the (cylindrical tank) overlay is the culprit: it exceeds some bounds of the flex component which causes chrome to create a horizontal scroll bar.

I got around this by nesting a coordinate view with the cylindrical tank with some SVG to essentially make the cylindrical tank wider. Is there a way to leave overlays on (not check Overlay opt-out) without having the embedded component get wider (and therefore cause a horizontal scroll bar)? Would be nice if there was a way to widen or pad the flex component a little bit extra so the Modbus error overlay did not cause a horizontal scroll bar. Just not crazy about having scroll bars appear unexpectedly in my P&ID.

2

I have reproduced this. A workaround is to add the style “padding: 10px” to the flex container. “overflow: hidden” also works, but it clips the edges of the warning icon.

3

Darn. I had tried padding, but I missed the padding capability in the root of the flex container: I had tried padding the cylindrical tank itself (in the flex container). Nice simple solution: I ended up right padding the root 10px and bottom padding 5 px to get rid of both scroll bars. Thanks for the simple solution!