1
votes

Comment déplacer des éléments en HTML avec Angular

J'ai une page simple comme ci-dessous:

Comme vous pouvez le voir, il y a 3 éléments , mais je souhaite déplacer le bouton Annuler à droite de la page comme indiqué par un flèche dans l'image.

<mat-card-actions fxLayout="row wrap">
  <div>
    <button type="button" class="action-buttons1" [disabled]="!filterDataSelected" (click)="onClearButtonClicked()">Clear</button>
    <button type="button" class="action-buttons2" [disabled]="!filterDataSelected" (click)="fillOrRefreshTableData()">Search</button>
  </div>
  <div>
    <button type="button" class="action-buttons3" (click)="calcelProcess()">Cancel</button>
  </div>
</mat-card-actions>

Comment puis-je décaler uniquement le bouton Annuler et pas les autres? Je l'ai mis dans un autre bloc

 , mais je ne suis pas sûr qu'il soit correct ou non. J'ai essayé de jouer autour de  margin-padding-align  à l'intérieur de la définition   du bouton d'annulation mais il ne bouge pas.   Remarque: tout ce code est à l'intérieur d'un bloc  .

angular html css frontend

0 commentaires

3 Réponses :

2
votes

Puisque vous séparez déjà les boutons en 2 éléments, vous pouvez ajouter fxLayoutAlign = "space-between" à l'élément parent. Comme ceci:

<mat-card-actions fxLayout="row wrap" fxLayoutAlign="space-between">

0 commentaires

1
votes

Essayez ceci:

Html

.wrapper {
    display: flex;
    justify-content: space-between;
}

Css

<mat-card-actions fxLayout="row wrap">
<div class="wrapper">
  <div>
    button type="button" class="action-buttons1" [disabled]="!filterDataSelected"
            (click)="onClearButtonClicked()">
      Clear
    </button>
    <button type="button" class="action-buttons2" [disabled]="!filterDataSelected"
            (click)="fillOrRefreshTableData()"
    >Search
    </button>
  </div>
  <div>
    <button type="button" class="action-buttons3" (click)="calcelProcess()">
      Cancel
    </button>
  </div>
</div>
</mat-card-actions>

0 commentaires

0
votes

essayez ceci, dans mon cas fonctionne!

<mat-card-actions fxLayout="row wrap" fxLayoutAlign="end center">

0 commentaires