Dynamic Sizing of Component in Coordinate Container View

Hi, I have a view with a root coordinate container. The view is used as a popup and has many components that are fixed on the page, one of which is a text box area. I would like to resize the view and have only the description box increase/decrease in size. Using percent mode of the coordinate container makes all the components increase in size and that is not what I am looking for. I've also tried wrapping the text area in a flex container however that also did not give what I am looking for.

Wondering if anyone has come across the same scenario and has any suggestions?

Cheers

Can you post a screen shot of the popup? Would it make more sense to use a flex view instead of a coord view? 99.99 times out of 100 in my experience, a popup should be a flex view

Flex containers within coord containers are generally a wild beast that struggle to be tamed

Because the flex container is embedded in a coordinate container, so the container itself does not resize dynamically.

You can use a percentage for the width and height properties of your text box though. Even if the container itself isn't in percent mode. You can also do calculations there.
So, let's say there's a label on the left of the text box. That label is 150px wide, and you want the text box to take the remaining space. You can use width: calc(100% - 100px)
Adapt for your layout and you should be fine.

You can also set components inside a Coordinate Container to use a percentage value - even if the Coordinate Container itself is not in percent mode.

If you want the Text Area to always be ten percent of the width of whatever container it is in, you could set the width to "10%".

Thank you cmallonee! This worked and I was able to implement it.

1 Like

I feel ignored :X

Let me show why I believe you want calc(100% - npx):

Here are a fixed sized red label, and a 50% blue label:
image

So far, so good.
But, If you make the view wider...

or smaller...
image

They'll still take 50% of the width of the view, no matter what percentage of the view the red label takes.

Now, with the width of the blue label set to calc(100% - 200px):

image

image

It fits the view much more nicely.

If you don't want it to be too small, it's easy, you can add a min-width style:
image

And now it can't get smaller than 200px !

7 Likes

Hello @pascal.fragnoud, I'm listening to you :slightly_smiling_face:

1 Like