Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Blazor - Make InputText fit to parent container

Tags:

html

css

blazor

I would like to make a form with multiple InputText on the same line. But the InputText width is always 203px. How can I specify the InputText to fit to the parent width ?

<div class="row">
    <div class="col-2">
        <label>Address</label>
    </div>

    <div class="col-3">
        <InputText @bind-Value="Address.Postcode" placeholder="Postcode" />
    </div>

    <div class="col-3">
        <InputText @bind-Value="Address.HouseNumber" placeholder="House Nb" />
    </div>

    <div class="col-4">
        <InputText @bind-Value="Address.Street" placeholder="Street" />
    </div>
</div>
like image 478
Bisjob Avatar asked Sep 15 '25 21:09

Bisjob


1 Answers

Add style="width: 100%" to the input

<div class="row">
    <div class="col-2">
        <label>Address</label>
    </div>

    <div class="col-3">
        <InputText style="width: 100%;" @bind-Value="Address.Postcode" placeholder="Postcode" />
    </div>

    <div class="col-3">
        <InputText style="width: 100%;" @bind-Value="Address.HouseNumber" placeholder="House Nb" />
    </div>

    <div class="col-4">
        <InputText style="width: 100%;" @bind-Value="Address.Street" placeholder="Street" />
    </div>
</div>
like image 182
Vencovsky Avatar answered Sep 17 '25 13:09

Vencovsky