I'm translating a bootstrap form to a material one. In the following photo I want the mat-form-field to look like the second bootstrap input
But I can't get the label on top of matInput
I've tried this to use the for attribute in label tag:
<div class="form-group">
<label for="paysAdresse">Pays : </label>
<mat-form-field appearance="outline">
<mat-label>Pays :</mat-label>
<input matInput id="paysAdresse" formControlName="pays" placeholder="pays">
</mat-form-field>
</div>
<div class="form-group">
<label for="voieAdresse">Voie : </label>
<input id="voieAdresse" formControlName="voie" type="text" class="form-control form-control-sm" >
</div>
but it gives me the label and the input in the same line. how can I achieve the wanted result ?
it can be easily achieved using Flex layout:
Use flex-direction: column:The flexible items are displayed vertically, as a column
Add this to your component CSS file
.form-group{
display: flex;
flex-direction: column;
}
Modified Html
<div class="form-group">
<label for="paysAdresse">Pays : </label>
<mat-form-field appearance="outline">
<input matInput id="paysAdresse" formControlName="pays" placeholder="pays">
</mat-form-field>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.