I have a <mat-card> containing a login form on my page. However, when error messages are displayed, the vertical size of the <mat-card> changes and I need it to remain the same.
Is there a way to prevent this from happening?
- Below, you will find my HTML file, the SASS file for the error messages, as well as pictures depicting the issue.
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: $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;
https://i.sstatic.net/npchK.png https://i.sstatic.net/e8B2R.png