1
votes

XML: comment aligner les éléments (boutons d'une HBox / Vbox) à droite

Comme l'indique le titre.

Ma tentative:

<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>

Ajout d'un alignItems -> à droite afin que les éléments de Hbox sera placé sur le côté droit de VBox mais cela ne semble pas fonctionner.

Pourquoi ne fonctionne pas?

javascript xml icons sapui5 right-align

0 commentaires

3 Réponses :

1
votes

Essayez avec alignContent au lieu de alignItems OU une combinaison des deux. Il semble que les deux ont un certain impact.

Vous pouvez également consulter la documentation HBox API .

1 commentaires

Nous vous remercions de votre contribution! pour HBox justifyContent fonctionnait mieux que alignContent

1
votes

Le meilleur contrôle que je puisse suggérer 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>

1 commentaires

Nous vous remercions de votre contribution! J'avais besoin que ce soit avec HBox et avec HBox justify

0
votes

HBox (et VBox) est fondamentalement une Flexbox, pour mettre le contenu à bon escient, utilisez justifyContent pas alignContent ni 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>

Exemple

Bon référence pour le positionnement de la flexbox: https://css-tricks.com/ snippets / css / a-guide-to-flexbox /

Édition 1: exemple ajouté Edit 2: Grammaire et fautes de frappe

0 commentaires