[英]Vertically Align mat-checkbox and mat-form-field | Angular Material | Angular
但是,问题是<mat-form-field>
和<mat-checkbox>
没有垂直对齐。 如何通过垂直对齐它们来向前 go ?
这是代码:
<mat-card>
<mat-card-title>
Family Information
</mat-card-title>
<form [formGroup]="familyInfo">
<div fxLayout="row" fxLayoutAlign="flex-start" fxLayoutGap="40px">
<mat-form-field fxFlex="10%">
<mat-label>Contact Name</mat-label>
<input matInput>
</mat-form-field>
<mat-form-field fxFlex="10%">
<mat-label>Relation Type </mat-label>
<mat-select>
<mat-option *ngFor="let relationType of relationTypes" [value]="relationType" color="accent">
{{relationType}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="10%">
<mat-label>Gender </mat-label>
<mat-select>
<mat-option *ngFor="let gender of genders" [value]="gender" color="accent">
{{gender}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="10%">
<mat-label>Date Of Birth</mat-label>
<input matInput [matDatepicker]="dateOfBirth" formControlName="dateOfBirth">
<mat-datepicker-toggle matSuffix [for]="dateOfBirth"></mat-datepicker-toggle>
<mat-datepicker #dateOfBirth></mat-datepicker>
</mat-form-field>
<mat-checkbox formControlName="isDependent">Is Dependent</mat-checkbox>
<div fxFlex="100%"></div>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit" class="align-right-button">
Save
</button>
</mat-card-actions>
</div>
我尝试使用<mat-form-field>
,但根据 angular 材料文档。 <mat-checkbox>
不能是<mat-form-field>
的一部分
您必须手动 position 复选框。 没有其他方法可以排列元素。 类似align-self: center
for mat-checkbox。
请注意mat-form-field
有一些自定义填充/边距。 因此,要拥有完美的配件,您需要检查元素并在顶部添加几个 px。 根据字体大小,它会有所不同。
希望它会有所帮助。 祝你好运!
这就是我的处理方式:
<mat-checkbox class="checklist-leaf-node" style="width: 100%;" #checkBox formControlName="isDependent"> Is Dependent</mat-checkbox>
<mat-form-field style="width: 0%;">
<input matInput class="pointer" type="text">
</mat-form-field>
找到了一种解决方法,使用 css 并将 mat-checkbox 文本分离到其自己的 label 标记中,position 相对
<mat-checkbox style="position:relative;top:-20px;left:15px;">
</mat-checkbox>
<label style="position:relative;left:27px;top:-10px;">
some long text
</label>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.