CODEWITHSUNDEEP
htmlcssasp.nettwitter-bootstraprazor
Thomas Kjærhus Jørgensen
Thomas Kjærhus Jørgensen

Reputation: 61

Bootstrap - input-group-addon labels width alignment

Below you can see a picture of how my input groups are as of right now. I want the widths of the labels to be equal

(fx. the label takes up 25% of the width, and the input takes up the last 75%)

I have tried adding custom CSS, but that just ended up (for some reason) shrinking the entire thing.

How the textboxes are now

I would prefer to make this dynamic

(as in not hardcoded px values, but % values, so it scales if you make the window smaller).

My code looks like this:

<div class="col-md-6" style="text-align: center">
   <div class="input-group input-group-lg form-group">
      <label class="input-group-addon">Område: </label>
      <select name="AreaId" asp-for="AreaId" class="form-control">
         <option disabled selected value=""> -- Vælg et område -- </option>          
            @foreach (var a in Model.Areas) {
               <option value="@a.ProfileID">@a.Name</option>
            }
      </select>
   </div>
   <div class="input-group input-group-lg form-group">
      <label class="input-group-addon" asp-for="ProductNumber">Varenummer: </label>
      <input name="ProductNumber" asp-for="ProductNumber" class="form-control" type="text" placeholder="Indtast varenummer" maxlength="8" />
   </div>
   <div class="input-group input-group-lg form-group">
      <label class="input-group-addon" asp-for="OrderNumber">Ordrenummer: </label>
      <input name="OrderNumber" asp-for="OrderNumber" class="form-control" type="text" placeholder="Indtast ordrenummer" />
   </div>
   <div class="input-group input-group-lg form-group">
      <label class="input-group-addon" asp-for="DateRange">Dato (Fra-Til): </label>
      <input id="daterange" name="DateRange" asp-for="DateRange" class="form-control" type="text" value="" placeholder="Klik i boksen og vælg til/fra dato" />
   </div>
</div>

Any help is GREATLY appreciated. Thanks in advance!

EDIT: Fixed my combination of form-group with input-group - The classes are no longer added at the same div

Also added a JSFiddle

Upvotes: 4

Views: 9998

Answers (2)

LobsterBaz
LobsterBaz

Reputation: 2023

Another way to change the width of the label and achieve the desired result is to add html non-breaking space &nbsp; as shown below:

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">Username &nbsp; &nbsp;</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

This is not the most elegant solution but if you are aware of the limitations this method can be handy in some cases.

Upvotes: 1

neophyte
neophyte

Reputation: 6624

Add some css to your code it will work...

.input-group-addon {
    min-width:60%;
    text-align:left;
}

working code snippet

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          <style type="text/css">
          	.input-group-addon { width: 60%; } // Or whatever width you want

/*.input-group { width: 100%; }
          </style>
          
  </head>

    <body>
    <div class="col-md-6" style="text-align: center">
    <div class="row">
    <div class="row">
   <div class="input-group input-group-lg form-group">
      <label class="input-group-addon">Område: </label>
      <select name="AreaId" asp-for="AreaId" class="form-control">
         <option disabled selected value=""> -- Vælg et område -- </option>          
            @foreach (var a in Model.Areas) {
               <option value="@a.ProfileID">@a.Name</option>
            }
      </select>
      </div>
   </div>
    <div class="row">
   <div class="input-group input-group-lg form-group">
      <label class="input-group-addon" asp-for="ProductNumber">Varenummer: </label>
      <input name="ProductNumber" asp-for="ProductNumber" class="form-control" type="text" placeholder="Indtast varenummer" maxlength="8" />
   </div>
   </div>
    <div class="row">
   <div class="input-group input-group-lg form-group">
      <label class="input-group-addon" asp-for="OrderNumber">Ordrenummer: </label>
      <input name="OrderNumber" asp-for="OrderNumber" class="form-control" type="text" placeholder="Indtast ordrenummer" />
   </div>
   </div>
    <div class="row">
   <div class="input-group input-group-lg form-group">
      <label class="input-group-addon" asp-for="DateRange">Dato (Fra-Til): </label>
      <input id="daterange" name="DateRange" asp-for="DateRange" class="form-control" type="text" value="" placeholder="Klik i boksen og vælg til/fra dato" />
   </div>
   </div>
</div>
</body>
  </html>

Upvotes: 3

Related Questions