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

Question

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?

score 4 · Answer 1 · answered Oct 15 '19 at 13:12

4

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

answered Oct 15 '19 at 13:12

Inizio

2,226
15
18

Thank you for your contribution! I needed for it to be with HBox and with HBox justifyContent works – Roman_Mr1112 Oct 15 '19 at 14:08

Lumpenstein · Accepted Answer · 2019-10-15T14:13:40.220

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

score 1 · Answer 3 · edited Oct 15 '19 at 13:09

1

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

edited Oct 15 '19 at 13:09

Inizio

2,226
15
18

answered Oct 15 '19 at 13:06

Руслана Нанчева

11
2

1

Thank you for your contribution! for HBox justifyContent functioned better than alignContent – Roman_Mr1112 Oct 15 '19 at 14:08

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

3 Answers3