I have a straightforward page set up like this: https://i.sstatic.net/8Iict.png
In the setup, there are 3 <button>
elements present. I am interested in relocating the Cancel button to the right side of the page, indicated 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>
What is the best way to move only the Cancel button without affecting the others? I placed it within a separate <div>
element, but I'm uncertain if this is the correct approach. Adjusting the margin-padding-align
properties within the Cancel button's <div>
tag has not been successful in moving it.
Please note that all this code resides within a <mat-card>
container.