CODEWITHSUNDEEP
cssasp.net-mvctwitter-bootstrap
EluciusFTW
EluciusFTW

Reputation: 2615

Aligning issue using input-group/input-group-addon in Bootstrap

In my project I have a form with three inputs, and for all I want to use the input-group and input-group-addon offered by Bootstrap. If I use the following code,

<div class="input-group form-group">
    <span style="text-align:left;" class="input-group-addon">... vs Frank</span>
    @Html.TextBoxFor(model => model.vsFrank, new { @class = "form-control" })
</div>

<div class="input-group form-group">
    <span style="text-align:left;" class="input-group-addon"> ... vs any other guy</span>
    @Html.TextBoxFor(model => model.vsAnyOther, new { @class = "form-control" })
</div>

<div class="input-group form-group ">
    <span style="text-align:left;" class="input-group-addon">... vs any other monster</span>
    @Html.TextBoxFor(model => model.vsAnyMonster, new { @class = "form-control" })
</div>

the result looks like this,

enter image description here

Now, I'd like to have the labels of the last two rows lined up, but the one of the first row shorter. If I add some width to them, as follows,

<div class="input-group form-group">
    <span style="width:15ch; text-align:left;" class="input-group-addon">... vs Frank</span>
    @Html.TextBoxFor(model => model.vsFrank, new { @class = "form-control" })
</div>

<div class="input-group form-group">
    <span style="width:25ch; text-align:left;" class="input-group-addon"> ... vs any other guy</span>
    @Html.TextBoxFor(model => model.vsAnyOther, new { @class = "form-control" })
</div>

<div class="input-group form-group ">
    <span style="width:25ch; text-align:left;" class="input-group-addon">... vs any other monster</span>
    @Html.TextBoxFor(model => model.vsAnyMonster, new { @class = "form-control" })
</div>

the result looks like this:

enter image description here

Now the whole first control is shortened! How can I prevent that without giving all the controls explicit width?

Upvotes: 1

Views: 1282

Answers (1)

m4n0
m4n0

Reputation: 32275

Add a min-width for the input-group.

CSS

 .input-group {
   min-width: 100%;
 }

HTML

<div class="row">
  <div class="col-md-3">
    <div class="input-group form-group">
      <span style="width:15ch; text-align:left;" class="input-group-addon">... vs Frank</span>
      <input class="form-control">
    </div>

    <div class="input-group form-group">
      <span style="width:25ch; text-align:left;" class="input-group-addon">... vs any other guy</span>
      <input class="form-control">
    </div>

    <div class="input-group form-group">
      <span style="width:25ch; text-align:left;" class="input-group-addon">... vs any other monster</span>
      <input class="form-control">
    </div>
  </div>
</div>

Bootply

Upvotes: 1

Related Questions