CODEWITHSUNDEEP
htmlcssangularfrontend
abidinberkay
abidinberkay

Reputation: 2025

How to move elements in HTML with Angular

I have a simple page like below: Page

As you can see, there are 3 <button> elements there, but I want to move Cancel button to the right of the page as shown by an arrow in the 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>

How can I shift only Cancel button and not the others? I put it in another <div> block, but I am not sure it is correct or not. I have tried to play around margin-padding-align inside of <div> definition of cancel button but it is not moving.

Note: all this code is inside of an <mat-card> block.

Upvotes: 1

Views: 2294

Answers (3)

Andy Band
Andy Band

Reputation: 313

try this, in my case works!

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

Upvotes: 0

Amir Arbabian
Amir Arbabian

Reputation: 3699

Try this:

Html

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

Css

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

Upvotes: 1

Henfs
Henfs

Reputation: 5411

Since you already separate the buttons in 2 elements, you could add fxLayoutAlign="space-between" to the parent element. Like this:

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

Upvotes: 2

Related Questions