Hi,
Does anyone knows the root cause, and possibly the solution to this annoying scroll bar randomly popping up?
I tried increasing padding, margin, basis size.. but it is still happening.
I can fix it by increasing the size, and returning back to the original size.
But it kept on happening, when I close and reopen the view.
You could try setting overflow to hidden.
Thank you.
Was driving me crazy.
Hope we put an end to it.
Is this a bug?
When outer box is minimized.
Scroll Bar is useless, not showing the top portion on column flex.
or not showing the left most portion on row flex.
I know, I can use coordinate container as an alternative.
I prefer visible in a lot of circumstances over hidden. visible won't hide parts of animations like hover effects that show a drop shadow, for example
Can you post a copy of your view? (you can use Shift+Right click on the view and select "Copy JSON" and then paste in here)
Below is the view:
I assume the purpose of scroll bar is so you can scroll up to the edge.
Seems that when I use Coordinate container, same thing happens.
{
"custom": {},
"params": {},
"props": {
"defaultSize": {
"height": 187,
"width": 209
}
},
"root": {
"children": [
{
"children": [
{
"meta": {
"name": "Label"
},
"position": {
"basis": "32px"
},
"props": {
"text": "Label"
},
"type": "ia.display.label"
}
],
"meta": {
"name": "FlexContainer"
},
"position": {
"basis": "200px",
"shrink": 0
},
"props": {
"direction": "column",
"style": {
"backgroundColor": "gray"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column",
"justify": "center",
"style": {
"overflow": "scroll"
}
},
"type": "ia.container.flex"
}
}
You've got overflow: scroll set on the root flex container which adds scrollbars regardless if they're needed or not which is the issue.
Yes, but the scroll bar even move to the top most edge, does not reach or show the top edge of the box. My label is still clipped as shown on my screenshot.
Is this the same case for you?
It was the case for me, its likely the scroll bar in the horizontal direction pushes the content in the label upwards. If you were only looking to get rid of that scrollbar you could use overflow-y.
Thanks Got This.
Screenshot and code attach below.
I wanted to make the scroll bar work properly.
When I reduce the width of the view, the scroll bar needs to come up and be able to scroll horizontally, to see the first letter of the text.
I could not make it happen as the first letter of text cannot be seen, even when scroll bar is at the left edge. See below:
{
"custom": {},
"params": {},
"props": {
"defaultSize": {
"height": 302,
"width": 447
}
},
"root": {
"children": [
{
"children": [
{
"meta": {
"name": "Label"
},
"position": {
"basis": "35px"
},
"props": {
"text": "LxxxxxxxxxxxxxxxxxxxxxxxxxxxxO"
},
"type": "ia.display.label"
}
],
"meta": {
"name": "FlexContainer"
},
"position": {
"shrink": 0
},
"props": {
"direction": "column",
"style": {
"backgroundColor": "lightpink"
}
},
"type": "ia.container.flex"
},
{
"children": [
{
"meta": {
"name": "Label"
},
"position": {
"basis": "32px"
},
"props": {
"text": "LxxxxxxxxxxxxxxxxxxxxxxxxxxxxO"
},
"type": "ia.display.label"
}
],
"meta": {
"name": "FlexContainer_0"
},
"position": {
"shrink": 0
},
"props": {
"direction": "column",
"style": {
"backgroundColor": "lightblue"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "root"
},
"props": {
"justify": "space-around",
"style": {
"backgroundColor": "#ffa500"
}
},
"type": "ia.container.flex"
}
}
Flex Scroll bar not showing content fully Solve.
Thank you google and github.
Using Center justify was the culprit.
Instead. set marginLeft, marginRight to auto for items on the edge.
Alternative solution for text (and anything that can be centered):
make the label basis auto, grow 1, shrink 0, and center the text in the label instead of centering the label in the container. Avoids the need for margins, which I'm not a fan of.
