Tab container - centre contents of tab on screen

Ignition Early Access
1

I have a perspective view, on which I want to display some reasonably complex graphics (plant overview mimic). Due to size, I’ve split it into three sections, and used a tab view to cycle between Area 1, Area 2, and Area 3.

The container on each tab is just a coordinate container, in fixed mode - due to the complexity, I don’t want the graphic to scale. It all works fine, except that I’d like the graphic to ultimately be centred in the available space, and I can’t work out how to make that happen. The coordinate container itself scales to the available space, but the graphics within that container just appear top left (as you’d expect, when it’s just working on an X/Y position). This leaves a lot of white space to the right of and below the graphic, which just looks half finished.

Is there a way to make my graphics sit centred within the available space, with roughly even whitespace on all sides? I’m imagining that I probably just need to put my graphics within a sub-container, but I can’t quite get my head around which way to approach it.

2

You’d most likely want your Tab to contain a Flex Container in “column” orientation, which then contains a Flex Container in “row” orientation (with grow set to 1), which then contains your Coordinate Container (or an Embedded View of your View which is a Coordinate layout). Then you can tinker with the props.justify settings of the Flex Containers until you have the content where you want it, but setting justify to “center” should do what you want.

1 Like
3

Putting your coordinate container inside a flex container would be a great way to keep it centered, as suggested above.

You might also try switching it to “percent” mode and specifying an aspect ratio - this will make the coordinate container center and scale your contents automatically, which might be nice.

4

Thanks. It didn’t work quite like that, but once I had a play with the flex containers I worked out a way to do what I needed.

  • Create a coordinate view with my required graphics
  • In the relevant tab, add a flex container in column mode, justify center
  • Inside that container, add a flex container in row mode, justify center, grow 0, basis set to match the height of the coordinate view I want to display
  • Inside that container, place an embedded view of the coordinate view

Does exactly what I needed.

1 Like