Form Input Field not in line for Angular 8
I have 4 form fields in the form and two fields in each row. The title of one field is very long so the form field is shifted down while the other form field title is small so there is a mis-alignment in the form. Ex:
Very long Field name Small field name that is wrapped in three __________________ lines ______________________ Field 3 Field 4 ______________________ ___________________ The very long field name and small field name input should be in the same line like:
Very long Field name Small field name that is wrapped in three lines ______________________ ___________________ My HTML code is:
<div class="form-group"> <label>form field name</label> <input type="text"> </div> In CSS I tried:
.form-group{ flex:60%; 
You could add min-height to label with CSS equal with the height of the biggest label. See example below:
<div style="width: 150px;display: inline-block;"> <label style="min-height: 50px; display: block;">form field name</label> <input type="text"> </div> <div style="width: 150px; display: inline-block;"> <label for=""> Very long Field name that is wrapped in three lines <input type="text"> </label> </div>
You can use angular flex layout to handle this. This would dynamically change the height based on length of the text
<div fxLayout="row" fxLayoutGap="20px"> <div fxLayout="column" fxLayoutAlign="space-between"> <label>Very long Field name that is wrapped in three lines</label> <mat-form-field> <input matInput> </mat-form-field> </div> <div fxLayout="column" fxLayoutAlign="space-between"> <label>Small field name</label> <mat-form-field> <input matInput> </mat-form-field> </div> </div> 
