0

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
form

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 ?

  
improve this question
  • Your best bet would be to create a custom input element with content projection using material for styling only the <input> element. – Bogdan B May 20 at 13:55
  • Let me know whether my solution solves your issues – Vikas May 20 at 14:04
  • @BogdanB Why to use content projection I am sure it would be a bad choice, I would Stick to KISS. it can be easily achieved using CSS – Vikas May 20 at 14:06
  • @Aminos did my answer help? – Vikas May 21 at 14:33
1

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>

liveDemo

improve this answer

来自  https://stackoverflow.com/questions/56221342/how-can-i-put-label-on-top-of-matinput-like-bootstrap