CODEWITHSUNDEEP
javascriptxmliconssapui5right-align
Roman_Mr1112
Roman_Mr1112

Reputation: 63

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

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?

Upvotes: 3

Views: 9885

Answers (3)

Ruckert Solutions
Ruckert Solutions

Reputation: 1301

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

Upvotes: 5

Inizio
Inizio

Reputation: 2256

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

Upvotes: 4

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

Reputation: 11

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

Upvotes: 1

Related Questions