javascriptxmliconssapui5right-align

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?


Solution

  • 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