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.
I have the same problem. I have tried with this solution and it doesn't work.
This is a JSON copy of my view
[
{
"type": "ia.container.flex",
"version": 0,
"props": {
"wrap": "wrap",
"justify": "space-evenly",
"alignItems": "baseline",
"alignContent": "center",
"style": {
"classes": "components/Card",
"max-height": 300,
"width": "80%"
}
},
"meta": {
"name": "FlexContainer"
},
"position": {
"grow": 1,
"basis": "310px"
},
"custom": {},
"children": [
{
"type": "ia.input.text-field",
"version": 0,
"props": {
"placeholder": "ID",
"style": {
"height": 30,
"margin": 10,
"width": 200
}
},
"meta": {
"name": "ID"
},
"position": {},
"custom": {}
},
{
"type": "ia.input.text-field",
"version": 0,
"props": {
"placeholder": "Nombre",
"style": {
"height": 30,
"margin": 10,
"width": 200
}
},
"meta": {
"name": "FirstName"
},
"position": {},
"custom": {}
},
{
"type": "ia.input.text-field",
"version": 0,
"props": {
"placeholder": "Apellidos",
"style": {
"height": 30,
"margin": 10,
"width": 200
}
},
"meta": {
"name": "LastName"
},
"position": {},
"custom": {}
},
{
"type": "ia.input.text-field",
"version": 0,
"props": {
"placeholder": "Teléfono",
"style": {
"height": 30,
"margin": 10,
"width": 200
}
},
"meta": {
"name": "Phone"
},
"position": {},
"custom": {}
},
{
"type": "ia.input.text-field",
"version": 0,
"props": {
"placeholder": "Email",
"style": {
"height": 30,
"margin": 10,
"width": 200
}
},
"meta": {
"name": "Email"
},
"position": {},
"custom": {}
},
{
"type": "ia.input.button",
"version": 0,
"props": {
"text": "Añadir usuario",
"style": {
"height": 30,
"margin": 10,
"width": 200
}
},
"meta": {
"name": "Button"
},
"position": {},
"custom": {},
"events": {
"dom": {
"onClick": [
{
"config": {
"script":
},
"scope": "G",
"type": "script"
},
{
"config": {
"draggable": true,
"id": "ORyYJvIl",
"modal": false,
"overlayDismiss": false,
"resizable": true,
"showCloseIcon": true,
"type": "open",
"viewPath": "PopUp/NewUser",
"viewportBound": false
},
"scope": "C",
"type": "popup"
}
]
}
}
}
]
}
]
I don't even need to try it to tell this json is not valid. It starts with [ and ends with },
Also, when posting code, use the code formatting tool: 
Or directly wrap your code in triple backticks: ```
You can even hint what language you're using, to apply syntax highlighting:
```json
code
```
One more thing: When posting a lot of code, use the <details> tag.
Here's how you use it:
<details>
\`\`\`json
lots of code
\`\`\`
</details>
Note the blank line between the details tag and the backticks
and it will look something like this:
lots of code
Could someone help me?
com.inductiveautomation.ignition.common.gson.JsonSyntaxException: java.lang.IllegalStateException: Expected BEGIN_OBJECT but was BEGIN_ARRAY at line 1 column 2 path $
at com.inductiveautomation.ignition.common.gson.internal.bind.ReflectiveTypeAdapterFactory$Adapter.read(ReflectiveTypeAdapterFactory.java:397)
at com.inductiveautomation.ignition.common.gson.internal.bind.TreeTypeAdapter.read(TreeTypeAdapter.java:70)
at com.inductiveautomation.ignition.common.gson.Gson.fromJson(Gson.java:1227)
at com.inductiveautomation.ignition.common.gson.Gson.fromJson(Gson.java:1137)
at com.inductiveautomation.ignition.common.gson.Gson.fromJson(Gson.java:1047)
at com.inductiveautomation.ignition.common.gson.Gson.fromJson(Gson.java:982)
at com.inductiveautomation.perspective.designer.workspace.nav.ViewNode$6.actionPerformed(ViewNode.java:605)
at java.desktop/javax.swing.AbstractButton.fireActionPerformed(Unknown Source)
at java.desktop/javax.swing.AbstractButton$Handler.actionPerformed(Unknown Source)
at java.desktop/javax.swing.DefaultButtonModel.fireActionPerformed(Unknown Source)
at java.desktop/javax.swing.DefaultButtonModel.setPressed(Unknown Source)
at java.desktop/javax.swing.AbstractButton.doClick(Unknown Source)
at java.desktop/javax.swing.plaf.basic.BasicMenuItemUI.doClick(Unknown Source)
at java.desktop/javax.swing.plaf.basic.BasicMenuItemUI$Handler.mouseReleased(Unknown Source)
at java.desktop/java.awt.Component.processMouseEvent(Unknown Source)
at java.desktop/javax.swing.JComponent.processMouseEvent(Unknown Source)
at java.desktop/java.awt.Component.processEvent(Unknown Source)
at java.desktop/java.awt.Container.processEvent(Unknown Source)
at java.desktop/java.awt.Component.dispatchEventImpl(Unknown Source)
at java.desktop/java.awt.Container.dispatchEventImpl(Unknown Source)
at java.desktop/java.awt.Component.dispatchEvent(Unknown Source)
at java.desktop/java.awt.LightweightDispatcher.retargetMouseEvent(Unknown Source)
at java.desktop/java.awt.LightweightDispatcher.processMouseEvent(Unknown Source)
at java.desktop/java.awt.LightweightDispatcher.dispatchEvent(Unknown Source)
at java.desktop/java.awt.Container.dispatchEventImpl(Unknown Source)
at java.desktop/java.awt.Window.dispatchEventImpl(Unknown Source)
at java.desktop/java.awt.Component.dispatchEvent(Unknown Source)
at java.desktop/java.awt.EventQueue.dispatchEventImpl(Unknown Source)
at java.desktop/java.awt.EventQueue$4.run(Unknown Source)
at java.desktop/java.awt.EventQueue$4.run(Unknown Source)
at java.base/java.security.AccessController.doPrivileged(Unknown Source)
at java.base/java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(Unknown Source)
at java.base/java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(Unknown Source)
at java.desktop/java.awt.EventQueue$5.run(Unknown Source)
at java.desktop/java.awt.EventQueue$5.run(Unknown Source)
at java.base/java.security.AccessController.doPrivileged(Unknown Source)
at java.base/java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(Unknown Source)
at java.desktop/java.awt.EventQueue.dispatchEvent(Unknown Source)
at java.desktop/java.awt.EventDispatchThread.pumpOneEventForFilters(Unknown Source)
at java.desktop/java.awt.EventDispatchThread.pumpEventsForFilter(Unknown Source)
at java.desktop/java.awt.EventDispatchThread.pumpEventsForHierarchy(Unknown Source)
at java.desktop/java.awt.EventDispatchThread.pumpEvents(Unknown Source)
at java.desktop/java.awt.EventDispatchThread.pumpEvents(Unknown Source)
at java.desktop/java.awt.EventDispatchThread.run(Unknown Source)
Caused by: java.lang.IllegalStateException: Expected BEGIN_OBJECT but was BEGIN_ARRAY at line 1 column 2 path $
at com.inductiveautomation.ignition.common.gson.stream.JsonReader.beginObject(JsonReader.java:393)
at com.inductiveautomation.ignition.common.gson.internal.bind.ReflectiveTypeAdapterFactory$Adapter.read(ReflectiveTypeAdapterFactory.java:386)
... 43 moreIgnition v8.1.37 (b2024013011)
Java: Azul Systems, Inc. 17.0.9
Please select your named View node in the Project Browser panel (NOT the root node of the View - the actual named resource). Hold Shift, then right-click the View node, and select Copy JSON. Please paste that content here in a formatted manner.
You need to Shift +right click on the view to see copy json
I swear I had that in my instructions and I must have deleted it.