I am having an issue with the column view layout where it stacks objects vertically when viewing them in a webpage. They appear normally in the designer. Any ideas what could be causing this to happen?
What does the layout look like for the other breakpoints? I’m guessing the web browser screenshot would meet the large breakpoint and that isn’t the one shown.
The layout is identical for all of the breakpoints. Also, the row/column index of the objects for each breakpoint is the same, (where the top left gauge is at 0,0 & the one to the right of it is at 0,3 for the small, medium, & large breakpoint). I have tried everything I can think of to prevent this from happening with no luck. The vertical stacking happens when I use the column container within a coordinate view as well.
Can you upload/post the view.json file here? Shift + right click the ‘View’ node in the project browser and select ‘Copy JSON’.
{
"custom": {},
"events": null,
"params": {},
"permissions": null,
"propConfig": null,
"props": {},
"root": {
"children": [
{
"meta": {
"name": "Gauge"
},
"position": {
"breakpoints": [
{
"colIndex": 0,
"name": "sm",
"order": 1,
"rowIndex": 0,
"span": 1
},
{
"colIndex": 0,
"name": "md",
"order": 1,
"rowIndex": 0,
"span": 1
},
{
"colIndex": 0,
"name": "lg",
"order": 1,
"rowIndex": 0,
"span": 1
}
],
"height": 56
},
"props": {
"backgroundColor": "",
"innerAxis": {
"color": "#777777",
"data": "secondaryValue",
"maxValue": 80,
"needle": {
"color": "#AAAAAA"
},
"percentRadius": 85,
"show": false,
"width": 1
},
"outerAxis": {
"color": "#777777",
"data": "value",
"maxValue": 120,
"needle": {
"color": "#000000"
},
"percentRadius": 100,
"ranges": [
{
"color": "#77B6D8",
"end": 80,
"start": 0,
"width": 8
},
{
"color": "#6E94D7",
"end": 105,
"start": 80,
"width": 12
},
{
"color": "#7A6BD5",
"end": 120,
"start": 105,
"width": 16
}
],
"show": true,
"width": 1
},
"style": {
"classes": []
}
},
"type": "ia.chart.gauge"
},
{
"meta": {
"name": "Gauge_0"
},
"position": {
"breakpoints": [
{
"colIndex": 3,
"name": "sm",
"order": 2,
"rowIndex": 0,
"span": 1
},
{
"colIndex": 3,
"name": "md",
"order": 2,
"rowIndex": 0,
"span": 1
},
{
"colIndex": 3,
"name": "lg",
"order": 2,
"rowIndex": 0,
"span": 1
}
],
"height": 56
},
"props": {
"backgroundColor": "",
"innerAxis": {
"color": "#777777",
"data": "secondaryValue",
"maxValue": 80,
"needle": {
"color": "#AAAAAA"
},
"percentRadius": 85,
"show": false,
"width": 1
},
"outerAxis": {
"color": "#777777",
"data": "value",
"maxValue": 120,
"needle": {
"color": "#000000"
},
"percentRadius": 100,
"ranges": [
{
"color": "#77B6D8",
"end": 80,
"start": 0,
"width": 8
},
{
"color": "#6E94D7",
"end": 105,
"start": 80,
"width": 12
},
{
"color": "#7A6BD5",
"end": 120,
"start": 105,
"width": 16
}
],
"show": true,
"width": 1
},
"style": {
"classes": []
}
},
"type": "ia.chart.gauge"
}
],
"meta": {
"name": "root"
},
"type": "ia.container.column"
}
}
Your view JSON is working fine for me - the two elements aren’t stacked in designer or in a running session. Can you replicate on different browsers/machines locally? Or contact support, so one of our reps can try to find out what’s unusual about your environment.
I hadn’t thought of trying a different browser until you mentioned it. I was running the app on version 54.0.2840.99 of Google Chrome. I upgraded to version 70.0.3538.77, and now the objects are showing correctly. Thanks again for the help!
1 Like