XML: how to align the items (Buttons of an HBox/Vbox) to the Right

user_12053765 0
Viewed 4229

As the Title states.

My attempt:

<VBox>  
    <HBox alignItems="Right" id="Tabelle">
        <Button visible="true" enabled="true" icon="sap-icon://navigation-right-arrow" />
        <Button visible="true" enabled="true" icon="sap-icon://open-command-field" />
        <Button visible="true" enabled="true" icon="sap-icon://process" />
    </HBox>
</VBox>

Adding an alignItems -> to the Right so the Elements of Hbox will be put on the Right side of VBox but it seem not to work.

Why is not working?

right-align sapui5 icons xml javascript
3 Answers

The best control I can suggest it FlexBox

<FlexBox
    alignItems="Center"
    justifyContent="End">
    <items>
        <Button enabled="true" icon="sap-icon://navigation-right-arrow" class="sapUiSmallMarginEnd"/>
        <Button enabled="true" icon="sap-icon://open-command-field" class="sapUiSmallMarginEnd"/>
        <Button enabled="true" icon="sap-icon://process" />
    </items>
</FlexBox>

Output

enter image description here

user_11055100

HBox (and VBox) is basically a Flexbox, to put the content to the right use justifyContent not alignContent nor alignItems.

<HBox justifyContent="End" id="Tabelle">
    <Button visible="true" enabled="true" icon="sap-icon://navigation-right-arrow" />
    <Button visible="true" enabled="true" icon="sap-icon://open-command-field" />
    <Button visible="true" enabled="true" icon="sap-icon://process" />
</HBox>

Example

Good reference for flexbox positioning: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Edit 1: Added Example Edit 2: Grammar & Typos

user_72047730

Try with alignContent instead of alignItems OR combination of both. It seems that both have some impact.

You can check the HBox API documentation as well

user_117080190
Related