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,
)