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

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

Basic View definition to demonstrate. Note that setting overflowX/Y/Blank to visible all do exactly the same thing.
{
"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"
}
}
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,
)



