Search code examples
javascriptxmlfrontendsapui5backend

SAPUI5, How to: Create a Label/Text that is inline with a RadioButton Group (the Buttons also inline)


I am working with SAPUI5, i just wondered how can i make the Text/Label be inline with a RadioButtonGroup, with the Buttons that also inline.

Summarized: Text/Label inline with Buttons, that are also displayed inline.

What i tried:

<FlexBox alignItems="Start"
justifyContent="Center"> 

<Text text="An example of a group in warning state"/>
            <RadioButtonGroup valueState="Warning">
                <buttons>
                    <RadioButton id="RB4-1" text="Option 1"/>
                    <RadioButton id="RB4-2" text="Option 2"/>
                </buttons>
            </RadioButtonGroup>

</FlexBox>

What it does: It makes the Label/Text be inline with the RadioButtonGroup, however the Buttons are displayed as a block.

How do i achieve the formatting that i described?

This how it should look like


Solution

  • enter image description here

    <FlexBox alignItems="Center" 
        justifyContent="Center">
    
        <Text text="An example of a group in warning state" />
        <RadioButtonGroup columns="4" 
            valueState="Warning">
            <buttons>
                <RadioButton id="RB4-1" 
                    text="Option 1" />
                <RadioButton id="RB4-2" 
                    text="Option 2" />
                <RadioButton id="RB4-3" 
                    text="Option 3" />
                <RadioButton id="RB4-4" 
                    text="Option 4" />
            </buttons>
        </RadioButtonGroup>
    
    </FlexBox>
    

    RadioButtonGroup has the property columns. Multiple columns are displayed next to each other and not beneath.

    If you set alignItems to Center the label and the radio buttons text are (more or less) vertically aligned.