[英]Mat-Select dropdown detached from select element
我是 angular 的新手,并尝试使用 mat-select 设置下拉菜单。 出于某种原因,当您单击元素打开选项时,它们会出现在左侧的其他页面内容之后,如下图所示(这是当我 select "Class" 时):
所有position
/ display
都是默认的,所以我不确定还有什么会影响它的定位。 这是相关的代码片段
HTML
<div class="character-detail-header">
<mat-form-field>
<mat-label>Class:</mat-label>
<mat-select formControlName="characterClass" [errorStateMatcher]="matcher">
<mat-option *ngFor="let charClass of classes" [value]="charClass">{{charClass}}</mat-option>
</mat-select>
<mat-error>
<span *ngIf="!characterForm.get('characterClass').valid && characterForm.get('characterClass').touched">Please enter Class</span>
</mat-error>
</mat-form-field>
<!-- Continued -->
</div>
SCSS
mat-label {
color: black;
width: 25%;
font-size: 1rem;
float: left;
}
mat-select,
input {
width: 50%;
float: right;
text-align: right;
}
.character-name-header {
width: 30%;
float: left;
border: 1px solid black;
mat-form-field {
width: 100%;
}
}
.character-detail-header {
padding: 1rem;
width: 60%;
float: right;
border: 1px solid black;
text-align: center;
mat-form-field {
width: 28%;
height: 2rem;
margin: 0 1rem;
}
}
(后期)更新:需要重新启动 angular 服务器才能看到更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.