Using CSS position and left/right/top/bottom props to move objects in a flex on top of each other

Ignition
1

I found this "life hack" a little while back and thought I'd mention it here.

You can set the style.position of components in a flex container to something like "absolute" and then add width, height, and any of left top right and/or bottom props to move your component around.

For example, I created this view below as a flex view and I wanted to put the alarm symbol "on top" of the analogue indicator which is set to grow 1 shrink 1. I also wanted the alarm indicator to take up the full view content. So to do this, I used the style settings in the screenshot for the alarm symbol. This will keep the alarm symbol "anchored" to the bottom left of the View at absolute coordinates (relative to the View), regardless of what size the View is.

image

image

Alarm symbol style settings:
image

Hope this helps someone!

Edit:
If you want to place the component halfway, or any % really, down the height of the flex, you need to move the origin and translate the component by 50% of its height, since the CSS left/right/top/bottom use the component's top-left as the origin; transforms, on the other hand, use a settable origin which defaults to the centre (you can set this with transform-origin).

image

11 Likes
2

Good to know! I have used margin parameters (with -/+ values depending on movement I need) to overlay items in past projects.

3

I have used those before too. It's kind of cool that you can put stuff outside of the template View :slight_smile: Need to make sure to set overflow: visible on the embedded view though
image

image
image833×586 38.5 KB

2 Likes
4

Thanks for sharing, in this example, how is a flex container any "better" than coordinate?

5

Well for one, the alarm symbol will always be in the bottom left. It's similar to an anchored component in Vision. In a coord container, there's no way (without probably similarly using position/etc) to anchor components.

6

Thanks for posting this Nick. I found another use case for this.

It allows you to basically make a flex coordinate container. Why would you want one? Imagine a scenario where you want to build a template that supports a dynamic number of indicators at locations based on the value of a setpoint. You can use this strategy to dynamically spawn as many indicators as you need based on indirect bindings from a parameterized tagpath to a UDT.

It's a very powerful technique I think people are sleeping on. I know I was.

edit:
I'm using this on something right now. One thing I just learned is you want to uncheck the "useDefaultViewWidth" and "useDefaultViewHeight" when doing this in a flex repeater or the dynamically created elements will not scale with their parent.

I just wanted to add that in case someone is struggling with this sometime in the future. It's easy to miss that property when you're using a flex repeater in an unintended way.