How to align radio buttons within a radio group to be aligned horizontally?

moxierichard · May 31, 2020, 7:53am

as questioned above, these buttons does not aligned horizontally.
Can anybody help? thanks very much.
https://www.babylonjs-playground.com/#9M6M2I#20
I guess maybe I should set the radio button’s alignment one by one,but not sure.
or maybe I misunderstand the logic of alignment itself.

JohnK · May 31, 2020, 5:04pm

If I remember correctly a selection panel was only designed for vertical alignment. For horizontal alignment you need to use a stack panel.

moxierichard · May 31, 2020, 5:25pm

Thanks for your memory, I 'd try stack panel.

nuguru · October 27, 2022, 6:31pm

Did switching to stack panel work for you? I have a similar problem where I am trying to align radio buttons horizontally. If I simply replace Selection Panel with StackPanel I get an error as ‘addGroup’ is not a function of stackpanel. If I use addControl instead of addGroup I get an error saying ‘t._link is not a funtion’

were you able to find a solution for this issue?

Takemura · October 27, 2022, 9:20pm

A simple workaround was created here:

But you could go deeper and either try customize SelectionPanel-class or create your own custom one:

github.com

BabylonJS/Babylon.js/blob/master/packages/dev/gui/src/2D/controls/selector.ts

import { Rectangle } from "./rectangle";
import { StackPanel } from "./stackPanel";
import { Control } from "./control";
import { TextBlock } from "./textBlock";
import { Checkbox } from "./checkbox";
import { RadioButton } from "./radioButton";
import { Slider } from "./sliders/slider";
import { Container } from "./container";

/** Class used to create a RadioGroup
 * which contains groups of radio buttons
 */
export class SelectorGroup {
    private _groupPanel = new StackPanel();
    private _selectors: StackPanel[] = new Array();
    private _groupHeader: TextBlock;

    /**
     * Creates a new SelectorGroup
     * @param name of group, used as a group heading

This file has been truncated. show original

Topic		Replies	Views
How to align radio buttons horizontally on a selection panel? Questions	4	1300	June 8, 2020
Getting buttons to align in a selectBox Questions gui	4	786	November 11, 2019
Stack panel horizontal alignment Bugs	5	1632	November 5, 2019
GUI stackpanel alignment Questions	10	2488	December 18, 2018
Merging horizontal and vertical panels doesn't work Questions	4	818	July 11, 2019

How to align radio buttons within a radio group to be aligned horizontally?

Related topics