How can i do my <mat-card> doesn't expand when messages are displayed in Angular 9

Question

I have my <mat-card> that has one form for the login of my page, the problem is when the error messages are displayed they change the size of the <mat-card> vertically and i need it to stay in the same size.

How can i do that?

• Below i will let my html file , the sass file of the error messages and pictures of what I have

html file

<div class="bg"> 
    <div class="main-div color ">
        <mat-card class="z-depth center col-sm-4 " flex="50" >
            <mat-radio-group aria-label="Select an option" [(ngModel)]="radio_btn">
                <mat-radio-button  [value]="true" >User</mat-radio-button>
                <mat-radio-button [value]="false">Admin</mat-radio-button>
            </mat-radio-group> 

                <div class="row justify-content-center " *ngIf="radio_btn==true;else form2">
                    <form class="example-form " [formGroup]="loginForm" (ngSubmit)="sendUser()">
                        <mat-form-field class="example-full-width ">
                            <input matInput formControlName="Identifier" placeholder="Identifier" >
                        </mat-form-field><br>
                        <div class=" alert-danger space" *ngIf="identifier.invalid && (identifier.dirty || identifier.touched)">
                            <div class="container-error-message " *ngIf="identifier.errors.required">
                                Identifier required
                            </div>
                            <div class="container-error-message" *ngIf="identifier.errors.minlength">
                                Identifier must be at least 7 characters long.
                            </div>
                        </div> 
                        <br>
                        <mat-form-field class="example-full-width">
                            <input matInput formControlName="Password" placeholder="Password" type="password" >
                        </mat-form-field><br>
                        <div class="alert-danger space" *ngIf="password.invalid && (password.dirty || password.touched)">
                            <div class="container-error-message" *ngIf="password.errors.required">
                                Password required
                            </div>
                            <div class="container-error-message" *ngIf="password.errors.minlength">
                                Password must be at least 5 characters long.
                            </div>
                        </div>
                        <br>
                        <button mat-raised-button [class.black]="!loginForm.invalid" [disabled]="loginForm.invalid" type="submit">Sign in</button>
                    </form>
                </div>
                <ng-template #form2> 
                    <app-home-admin></app-home-admin>
                </ng-template>

        </mat-card>
      </div>
    </div>

SASS file

@import './../../variables_scss/variables.scss';

example-icon {
    padding: 0 14px;
  }

  .example-spacer {
    flex: 1 1 auto;
  }

  .down{
    overflow-y: auto;
    .colour{
        //background: #141519;
        background: $orange-bg;
        .icons {
            color: $black;
          }
      }
  }

  .container{
    align-items: center; 
  }

  .main-div{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .center{
      width: 75%;
      margin: 10px auto;
      .mat-radio-button ~ .mat-radio-button {
        margin-left: 16px;
      }
      button {
        display: block;            
        width: 100%;
        margin: 2px;
        text-align: center;
        color: $orange !important;
        border-radius: 8px;
      }

    }
  }

.bg{
  background: $black;
  background: linear-gradient(to right, $dark_black,$light_black  );
}
.behind{
  z-index: 10;
}
.black {
  background-color:$black !important;  
 }

 .space{
  margin: $margin-errors;
  text-align: $text-align-center;
  width: $width-erros;
  border: 1px solid;
 }

* scss_variables*

$dark_black: #1b1b1b;
$light_black: #424242;
$black: #141519;
$margin-left: auto;
$orange:  #fc6407;
$colour_button :$black;
$orange-bg: linear-gradient(to right, #c43e00, #ff6f00);
$margin-errors: 0 auto;
$text-align-center: center;
$width-erros: 180px;

Answer 1

I am not able to replicate your issue with the code given by you. But i would suggest you to provide a constant height to mat-card which is sufficient to enclose all the items. Like i am taking 400px below:

mat-card {
  height: 400px;
}

Answer 2

This is how i solve it

Adding this to the space class

max-height: 0px ;
margin-top: 0px !important;

Adding this to the center class

height: 290px;

Answer 3

You can add maximum height and minimum hight of card as same like this in your CSS file , it's worked for me, if you done like this then if the content size is height,automatically scroll will be apply without any size correction

  .mat-card{
    min-height: 230px ;
    max-height: 230px ;
  }