Ignition Perspective Page - Scroll bar vertical if content is longer in height

I have a view (page) with root (direction set to column). In this root I am adding a bunch of flex containers (each of them are row direction). As I add more flex containers to the root I see the designer compresses each of the flex container to fit on the screen. I see the same effect on the browser as well. I want my view to grow vertically so user can scroll to content vertically. I tried various options like - style (overflow), position(grow), hard coding heights on the individual flex containers with no success except hard coding a very high style.height (like 2000px) on the root. But I don't want to hard code the height. Any suggestions?

  • Shift-select all the flex containers in the Project Browser.
  • In Property Editor set
POSITION
    grow : 0
    shrink : 0          <--- the important one!
    basis : 300px       <--- or whatever.

If you've messed up the root properties then try these:

PROPS
    direction : column
    wrap : nowrap
    justify : flex-start
    aligItems : stretch
    style
        overflow : auto

Play with position.basis and see if you can set this to auto so that it adopts the dimensions of the flex containers and that you're not setting parameters twice. You should probably then do the same with the flex containers, making sure that grow : 0 is set.

Thank you so much. This was very helpful and solved my problem