[英]How can i do my <mat-card> doesn't expand when messages are displayed in Angular 9
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.我的<mat-card>
有一个用于登录我的页面的表单,问题是当显示错误消息时,它们会垂直更改<mat-card>
的大小,我需要它保持相同的大小.
How can i do that?我怎样才能做到这一点?
html file 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 file 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* * 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;
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.但我建议您为 mat-card 提供一个恒定的高度,足以包含所有物品。 Like i am taking 400px below:就像我在下面取 400px 一样:
mat-card {
height: 400px;
}
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;
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您可以像这样在 CSS 文件中添加卡片的最大高度和最小高度,这对我有用,如果您这样做,那么如果内容大小为高度,将应用自动滚动而不进行任何大小校正
.mat-card{
min-height: 230px ;
max-height: 230px ;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.