Perspective RadioGroup wrap education

Ignition
#1

I’m trying to work out how to configure a flex layout to allow a RadioGroup and a button to wrap properly.

Perspective wrap 1 Perspective wrap 4
Figure 1. The project tree.
Figure 2. All components and the FlexContainer are set to 0, 0, auto.

Perspective wrap 2
Perspective wrap 2849×239 18.9 KB

Figure 3. The view when wider than the components.

Perspective wrap 3
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)

#2

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.

Screen Shot 2021-02-22 at 5.08.27PM
Screen Shot 2021-02-22 at 5.08.27PM1068×632 45.4 KB

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”.
Screen Shot 2021-02-22 at 5.09.32PM
Screen Shot 2021-02-22 at 5.09.32PM1548×830 106 KB

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
#3

Thank you.
Where do I paste the JSON to show your modified view? I can’t seem to paste anywhere on the Project Browser.

#4

In the Project Browser panel of the Designer, hold Shift and then right-click the View node. You can then select “Paste JSON”.

#5

I’m glad I asked! Where is that documented!

All is good.

#6

I don’t know that it is. It’s intended as a troubleshooting tool, though it also has some advanced applications.