问题描述
限时送ChatGPT账号..我希望输入字段和下拉字段与左侧相同(我在检查器上这样做)
无论我在样式表中放入什么类,它都不会缩小选择菜单的大小.这是我的 html 代码.
解决方案 您可以将表单字段包装在一个 div 中并为其分配一个类,以便您可以嵌套 CSS.嵌套 CSS 的原因是为了避免它影响其余的控件.我做了这样的事情:
<mat-form-field appearance="outline"><mat-label>结束时间</mat-label><input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl"><mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm"><mat-option value="AM">AM</mat-option><mat-option value="PM">PM</mat-option></mat-select></mat-form-field>
然后在全局某处添加以下 CSS:
.time-picker-component .mat-form-field-infix {显示:继承;}
演示
I want the input field and the drop down field in the same area like the one on the left (I did this on the inspector)
No matter what class I put in my stylesheet it won't shrink the size of the select menu. This is the html code I have.
<mat-form-field appearance="outline">
<mat-label>End Time</mat-label>
<input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">
<mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm">
<mat-option value="AM">AM</mat-option>
<mat-option value="PM">PM</mat-option>
</mat-select>
</mat-form-field>
解决方案
You could wrap your form field in a div and assign it a class so that you can nest the CSS. The reason to nest the CSS is to avoid it affecting the rest of the controls. I did something like this:
<div class="time-picker-component">
<mat-form-field appearance="outline">
<mat-label>End Time</mat-label>
<input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">
<mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm">
<mat-option value="AM">AM</mat-option>
<mat-option value="PM">PM</mat-option>
</mat-select>
</mat-form-field>
</div>
and then add the folloing CSS somewhere globally:
.time-picker-component .mat-form-field-infix {
display: inherit;
}
Demo
这篇关于角材料输入并在一个表单字段中选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论