Coordinate Container Scaling

Ignition
1

I am using a coordinate container view to build a dashboard. I want it to scale to the size of the window it is open in. I don't want anything to overflow, I want the entire container to shrink or expand with the window. That way nothing gets cut off and everything looks the same just bigger or smaller depending on the window.

2

Put it inside a Flex container and set its POSITION to:

'basis': auto,
'grow': 1,
'shrink': 1

Also, set its mode to percent.

3

A flex container doesn't give me the control over the individual components that I need. I need to use a coordinate container for this application.

4

Yes, but put it inside a Flex container.

1 Like
5

image
image911×306 6.2 KB

This is what it looks like when I put the coordinate container into a flex container. I want it to be able to keep the same look. If I am doing something wrong and just not understanding you I apologize, I am new to ignition.

6

Can you post the code here? Hold down SHIFT while right-clicking on the view, and select Copy JSON:

image
image405×525 27.8 KB

The view itself should be a Flex Container, with the Coordinate Container placed in its root.

7

{
"custom": {},
"params": {},
"props": {
"defaultSize": {
"height": 1730,
"width": 2220
}
},
"root": {
"children": [
{
"meta": {
"name": "Huntington"
},
"position": {
"grow": 1
},
"props": {
"path": "Huntington"
},
"type": "ia.display.view"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
}
}

FYI: Huntington is the name of the coordinate container

8

Looks like you're putting it in an embedded view? That should work, but I think you need to add basis: auto to its position (and possibly shrink: 1 though I'm not sure that matters). Also make sure the mode of the Coordinate Container is set to percent.

When posting code here, use the code formatting:

image
image414×114 3.4 KB

9 
{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 1730,
      "width": 2220
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Huntington"
        },
        "position": {
          "grow": 1
        },
        "props": {
          "path": "Huntington"
        },
        "type": "ia.display.view"
      }
    ],
    "meta": {
      "name": "root"
    },
    "position": {
      "basis": "auto",
      "grow": 1,
      "shrink": 1
    },
    "props": {
      "direction": "column"
    },
    "type": "ia.container.flex"
  }
}

Here is the updated code. I added that position parameters you suggested but nothing changed, it still looks the same as my last picture.

10

Add basis and shrink to the embedded view:

image
image223×149 3.81 KB

11

image
image829×1325 78 KB

In the perspective property editor I have them added, I'm not sure why they are not being added to the actual code itself.

12

Is the Coordinate Container mode: percent?

13

I threw together a quick project that demonstrates what you are attempting:

TEST_2025-06-18_1439.zip (39.4 KB)

Important to note: containers, tables, icons, graphics will resize with the container, but text will not (a label itself will, but not the text it contains). Resizing text to fit containers can be done, but is much trickier and requires CSS magic.