gpt4 book ai didi

html - 垂直对齐 mat-checkbox 和 mat-form-field | Angular Material | Angular

转载 作者:行者123 更新时间:2023-12-04 04:05:42 41 4
gpt4 key购买 nike

我正在尝试并排实现文本字段和复选框。像这样的东西。
enter image description here
但是,问题是 <mat-form-field><mat-checkbox> 不是垂直对齐的。
我如何通过垂直对齐它们来前进?
这是代码:

<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 Material 文档。 <mat-checkbox> 不能是 <mat-form-field> 的一部分

最佳答案

您必须手动定位复选框。没有其他方法可以排列元素。类似于用于 mat-checkbox 的 align-self: center 的东西。
请注意 mat-form-field 有一些自定义填充/边距。因此,要获得完美的配件,您需要检查元素并在顶部添加几个 px。根据字体大小,它会有所不同。
希望它会有所帮助。祝你好运!

关于html - 垂直对齐 mat-checkbox 和 mat-form-field | Angular Material | Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62552279/

41 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com