Как я могу сделать мой не раскрывается, когда сообщения отображаются в Angular 9

Question

У меня есть <mat-card>, в котором есть одна форма для входа на мою страницу, проблема в том, что когда отображаются сообщения об ошибках, они меняют размер <mat-card> по вертикали, и мне нужно, чтобы он оставался в том же размере.

Как я могу это сделать?

• Ниже я дам свой файл html, файл sass сообщений об ошибках и изображения того, что у меня есть

html файл

<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

@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

Вот как я это решаю

Добавление этого к классу пространства

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

Добавление этого к классу центра

height: 290px;

Answer 2

Я не могу повторить вашу проблему с указанным вами кодом. Но я бы посоветовал вам предоставить мат-карточке постоянную высоту, достаточную для того, чтобы охватить все предметы. Как я беру 400px ниже:

mat-card {
  height: 400px;
}