How to align radio buttons horizontally on a selection panel?

[moxierichard]

Hi
Can anybody help to suggest how to align radio buttons horizontally ?
I have 4 radio buttons within a radio group, and added the radio group to a selection panel.
by default these radio buttons in a group is aligned top-down style.
I tried this:
radiogroup.alignh=BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
and even this:
selectionPanel.alignh=BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;

but neither works.

[syntheticmagus]

Hi moxierichard,

If your radio buttons are in StackPanel, which I believe underpins the RadioPanel, you might be able to set the StackPanel's isVertical accessor to false so that the StackPanel arranges elements horizontally instead of vertically. (This might need to be done before adding any radio buttons to the RadioGroup so that the GUI knows how to arrange them as they’re added.) Give that a shot; does that achieve the effect you’re looking for?

[moxierichard]

Thanks for your advice.
I tried but not work.
In short words, the workflow radiobutton->radiogroup->selectionpanel->stackpanel can not fill my dream, even though I set stackpane.isVerticle=false

the PG is :
https://www.babylonjs-playground.com/index.html#XCPP9Y#3138

If you have time please take a look and give more idea? thanks very much.

[syntheticmagus]

Awesome, thanks so much for the Playground link! If you change the isVertical property there and then look in the console window, you can see that the StackPanel gives a bunch of warnings about using percentage width in a horizontal StackPanel. RadioGroup, it seems, is a convenience class designed to make it extremely easy to create radio buttons formatted in a very specific way.

Fortunately, it’s almost as easy to create radio buttons formatted a different way, we just have to use different tools. I went back to the docs for radio buttons and adapted code from the example provided there, which shows how to create radio buttons easily using a StackPanel directly, thereby avoiding problems where the RadioGroup sets state that conflicts with a horizontal StackPanel. I put this adapted code into a short function at the top of your Playground. I didn’t go through and do all the styling required to get it to look exactly like what you had before, but it should be straightfoward enough for you to build on this to style the interface the way you want it. Hope this is helpful, and best of luck!

[moxierichard]

OMG，exactly ， you code is elegant, simple and easy and beautiful！ and I learned a new skill of using “parent” from your code.

@syntheticmagus

Awesome, thanks so much for the Playground link! If you change the isVertical property there and then look in the console window, you can see that the StackPanel gives a bunch of warnings about using percentage width in a horizontal StackPanel. RadioGroup, it seems, is a convenience class designed to make it extremely easy to create radio buttons formatted in a very specific way.

Fortunately, it’s almost as easy to create radio buttons formatted a different way, we just have to use different tools. I went back to the docs for radio buttons and adapted code from the example provided there, which shows how to create radio buttons easily using a StackPanel directly, thereby avoiding problems where the RadioGroup sets state that conflicts with a horizontal StackPanel. I put this adapted code into a short function at the top of your Playground. I didn’t go through and do all the styling required to get it to look exactly like what you had before, but it should be straightfoward enough for you to build on this to style the interface the way you want it. Hope this is helpful, and best of luck!

@syntheticmagus

Awesome, thanks so much for the Playground link! If you change the isVertical property there and then look in the console window, you can see that the StackPanel gives a bunch of warnings about using percentage width in a horizontal StackPanel. RadioGroup, it seems, is a convenience class designed to make it extremely easy to create radio buttons formatted in a very specific way.

Fortunately, it’s almost as easy to create radio buttons formatted a different way, we just have to use different tools. I went back to the docs for radio buttons and adapted code from the example provided there, which shows how to create radio buttons easily using a StackPanel directly, thereby avoiding problems where the RadioGroup sets state that conflicts with a horizontal StackPanel. I put this adapted code into a short function at the top of your Playground. I didn’t go through and do all the styling required to get it to look exactly like what you had before, but it should be straightfoward enough for you to build on this to style the interface the way you want it. Hope this is helpful, and best of luck!