At the beginning of my project, I made the mistake of using a Coordinate Container to hold my filter controls. Inside that, I placed a Column Container—but on larger screens, the column container does not inherit the full width of its parent (the coordinate container).
To address this, I replaced the column container with a Flex Container, assuming it would adjust automatically. However, I’ve realized the Flex Container behaves similarly—it doesn't stretch to fit the full width of the parent Coordinate Container.
While placing the Flex Container directly at the root level does make it responsive, doing so isn’t feasible in my case. I have many buttons inside the container, and their paths are referenced in multiple places throughout the project—moving the container out of the coordinate structure would break a lot of things.
My question:
Is there a way to make the Flex Container fully adopt the width of its parent Coordinate Container and behave responsively across screen sizes?
Any guidance or workaround would be greatly appreciated!
I got nothing for your question, as posed, but:
This is a common mistake that you should fix. Instead of binding from one component to another, and writing scripts that need to follow component paths, you should be using view custom properties to tie everything together.
-
All entry fields and selectors and checkboxes should have their value property bidirectionally bound to a view custom property. All other bindings or scripting that needs that input value would point at the view custom prop, not at the component.
-
All raw data bindings that multiple components need to use need to be attached to a view custom property. The components then unidirectionally bind to that source instead of pointing to another component.
-
All event scripts that need to interact with any of this would use the view custom props. Whether reading or writing.
If you do this, not only will it be easy to maintain all of your bindings (because they are all in the same place), but you can then move components around in your view, including wrapping and unwrapping other containers, without breaking any functionality.
So, go fix your view's bindings and scripts. Then you can do any restructuring you need, trivially.
8 Likes
Absolutely do what @pturmel suggests, at least going forward with new development. The fact that you may already have way too much code bound to component properties to be able to feasibly refactor all of it is exactly why it is a good strategy. Not doing it makes it very hard to rearrange layouts without a) breaking something and b) not knowing what it is you might have broken.
But to answer your question, unless I'm misunderstanding the problem, I think all you have to do is change the mode of the Coordinate Container from fixed to percent. A component's width and height then become defined as a percentage of the size of the container...
5 Likes
Phil is giving you good advice for generally managing the data on the screen in a way that won't break as you move things around.
Beyond that in general layout stuff... There are a lot of ways to skin a cat.
You can set the width of your flex container to 100% with X of 0 so it fits whatever width the screen is ultimately growing to. Sometimes that can be a little awkward. I suspect this will fix the problem you're having but it may be a bit of a kludge compared to structuring the screen to natively do what you want.
This reflects a misunderstanding of what flex is and how containers behave.
The type of a container will only change what's INSIDE it, not how it fits in its own parent.
This means that your column container or flex container behave the same way because they're both in the same coordinate container.
If you want the nested container to change how it fits, the steps are the same regardless of the type of container they host.
With coordinate container as the root, you can set its mode to percent, in which case the children will grow and shrink with it. Each child's size is set in the position section of its properties. 1 means full width, 0.5 means half the width of the parent, etc.
Or, you can keep the coordinate container's mode to fixed, and set the child's size to 100%.
Now, changing the child container will only change how what's in the child itself behave. So your filter control will either be in flex mode if you're using a flex container, or in column mode if you're using a column container. But that's a completely independent from the root container.
3 Likes
Although I didn't understand how, but this worked. I just did the width of inner container to 1.0 after making parent percentage and it is now taking the whole width of the parent container on any size.
I will Spend some more time on it to fully understand this concept.
Exactly I should have follow this approach from the start, but it's never too late. I will gradually update it.
Thanks a lot.
1 Like