'Material card action buttons extend left & right beyond card content boundary

In this Angular 10.2 Material sample the right and left action buttons reach outside of the card-content:

enter image description here

The right edge of the "Create account" button should align with the right edge of the fields; similarly, the left edge of the "Sign in" button should align with the left edge of the fields.

The green in the image is the padding area; the orange is the margin; and, the blue is action area. Why is does the blue&green not align with the orange?

The HTML is:

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

and the CSS:

.mat-card-header {
  text-align: center;
  justify-content: center;
}

.signup-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

It seems like the alignment I want should be the default behavior so I must be doing something wrong...any ideas?

cssangularangular-materialangular-flex-layout


Solution 1:[1]

it will probably be solved if you moved this block

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

inside the <div fxLayout="column">...

why !?
i don't have experience using material but i faced the same issue using bootstrap .. it is because the outer layout class/element -'row' in the case of bootstrap- probably applies a margin like that:

margin-right: -15px;
margin-left: -15px;

and the inner class/element - 'col-md-6' in the case of bootstrap- applies a padding like that

padding-right: -15px;
padding-left: -15px;

Solution 2:[2]

Accepting Tomasz answer and adding more details here. The default Angular Material Card padding is:

@mat-card-padding: 16px !default;

and the mat-card-actions margins are:

.mat-card-actions {
  @extend %mat-card-section-base;
  margin-left: -$mat-card-padding / 2;
  margin-right: -$mat-card-padding / 2;
  padding: 8px 0;
}

so that's why the button edges don't align with the fields.

To align the edges of the buttons in the card-actions with the edges of the fields in the card-content, you can:

  1. reset the mat-card-actions margins:
<mat-card-actions style="margin-left: 0; margin-right: 0;">
  1. add padding to mat-card-actions (as Tomasz suggested in comments):
<mat-card-actions style="padding: 8px;">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ahmed Mansour
Solution 2

Related Questions