Check out this Angular 10.2 Material sample where the action buttons on the right and left extend beyond the card-content:
https://i.sstatic.net/Btxy1.png
The "Create account" button's right edge should align with the right edge of the fields, and the "Sign in" button's left edge should align with the left edge of the fields.
In the image, green represents the padding area, orange represents the margin, and blue represents the action area. Why is there misalignment between the blue/green and the orange?
The HTML code is as follows:
<mat-card class="signup-card">
<mat-card-header>
<mat-card-title>The title</mat-card-title>
<mat-card-subtitle>The longer explanatory sub-title.</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div fxLayout="column">
<div fxLayout="row" fxLayoutGap="10px">
<mat-form-field>
<mat-label>First name</mat-label>
<input matInput formControlName="firstName">
</mat-form-field>
<mat-form-field>
<mat-label>Last name</mat-label>
<input matInput formControlName="lastName">
</mat-form-field>
</div>
<mat-form-field>
<mat-label>Email</mat-label>
<input matInput formControlName="email" required>
<mat-error *ngIf="email.errors?.required">Email is required</mat-error>
<mat-error *ngIf="email.errors?.email">Not a valid email</mat-error>
</mat-form-field>
<div fxLayout="row" fxLayoutGap="10px">
<mat-form-field>
<mat-label>Password</mat-label>
<input matInput type="password" formControlName="password" required>
<mat-error *ngIf="password.errors?.required">Password is required</mat-error>
<mat-error *ngIf="password.errors?.minlength">Password is too short</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Confirm</mat-label>
<input matInput type="password" formControlName="passwordConfirm" required>
<mat-error *ngIf="passwordConfirm.errors?.required">Confirm password is required</mat-error>
<mat-error *ngIf="passwordConfirm.errors?.mustMatch">Password and confirm must match</mat-error>
</mat-form-field>
</div>
</div>
<mat-card-actions >
<button mat-button routerLink='/signin' routerLinkActive="active" type="button">Sign in</button>
<div fxFlex></div>
<button mat-flat-button routerLink='/signup' routerLinkActive="active" type="submit" color="primary">Create account</button>
</mat-card-actions>
</form>
</mat-card-content>
<mat-card-footer>
The footer containing final parting thoughts...
</mat-card-footer>
</mat-card>
Here is the associated CSS:
.mat-card-header {
text-align: center;
justify-content: center;
}
.signup-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The intended alignment does not seem to be the default behavior, so something could be going wrong... Any thoughts on why this is happening?