I’m trying to work out how to configure a flex layout to allow a RadioGroup and a button to wrap properly.
Figure 1. The project tree.
Figure 2. All components and the FlexContainer are set to 0, 0, auto.
Figure 3. The view when wider than the components.
Figure 4. The view when narrower than the components. Note that RadioGroup1 has wrapped but RadioGroup2 has not (although the button did).
How do I add another component to the right of the RadioGroup without destroying its ability to wrap?
Perspective RadioGroup wrap.zip (37.6 KB)
You’re asking how to provide “flexy” behavior while setting all of the flexy properties to values which prevent them from being flexy.
I was able to allow for the Radio Group to wrap by wrapping it in a column-oriented Flex Container and setting grow and shrink to values of 1. Now, this results in the Button not always being anchored to the end of the Radio Group, but at least you don’t have to scroll to your options any longer.
To replicate this, select that nested Radio Group, then right-click the component and hover over the “Wrap in Container” option, then select “Flex Column”.
Once the new container is in place in the View, set
grow and
shrink to values of
1.
view.json (10.6 KB)
1 Like
Thank you.
Where do I paste the JSON to show your modified view? I can’t seem to paste anywhere on the Project Browser.
In the Project Browser panel of the Designer, hold Shift and then right-click the View node. You can then select “Paste JSON”.
I’m glad I asked! Where is that documented!
All is good.
I don’t know that it is. It’s intended as a troubleshooting tool, though it also has some advanced applications.
