input-group-addon: how to align widths

Question

On small size browsers the input-groups will wrap and the different size of the two input-group-addons is painfully obvious.

Any way to align the width of the labels?

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<div class="col-md-12">
  <div class="row">
    <div class="col-md-6" style="padding:1%;">
      <div class="input-group input-group-lg">
        <span class="input-group-addon">Pickup Docket</span>
        <input id="pickDoc" type="text" class="form-control">
      </div>
    </div>
    <div class="col-md-6" style="padding:1%;">
      <div class="input-group input-group-lg">
        <span class="input-group-addon">Delivery docket required </span>
        <input type="button" class="form-control" />
      </div>
    </div>
  </div>
</div>

Answer 1

While technically you can make the elements the same size, you cannot (using CSS) make all of the labels the same width as the longest label because of the structure. However, you can use JavaScript.

Select all .input-group-addons that are the first child of their parent, then loop through them to find the longest one.

Once we have found the longest width, define a new stylesheet element and insert a media query into it that detects the width at which the breakpoint happens (992px) and sets the minimum width of the elements matching the previous selector to that of the longest element plus two pixels (for the border).

If you try to use width instead of min-width, it breaks the rest of the layout.

Using this method avoids the overhead and logic of capturing window.onresize

If you want to increase the specificity of the query, just change selector.

Demo

var selector = '.input-group-addon:first-child';
var labels = document.querySelectorAll(selector), longest = 0;

for(var i in Object.keys(labels))
    longest = longest < labels[i].clientWidth ? labels[i].clientWidth : longest;

var styleString = '@media screen and (max-width: 992px) { ' + selector + ' { min-width: ' + (+longest + 2) + 'px } }';

var style = document.createElement('style');
style.innerHTML = styleString;

document.body.appendChild(style);

var selector = '.input-group-addon:first-child';
var labels = document.querySelectorAll(selector), longest = 0;

for(var i in Object.keys(labels))
    longest = longest < labels[i].clientWidth ? labels[i].clientWidth : longest;

var styleString = '@media screen and (max-width: 992px) { ' + selector + ' { min-width: ' + (+longest + 2) + 'px } }';

var style = document.createElement('style');
style.innerHTML = styleString;

document.body.appendChild(style);

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<div class="col-md-12">
  <div class="row">
    <div class="col-md-6" style="padding:1%;">
      <div class="input-group input-group-lg">
        <span class="input-group-addon">Pickup Docket</span>
        <input id="pickDoc" type="text" class="form-control">
      </div>
    </div>
    <div class="col-md-6" style="padding:1%;">
      <div class="input-group input-group-lg">
        <span class="input-group-addon">Delivery docket required </span>
        <input type="button" class="form-control" />
      </div>
    </div>
  </div>
</div>

---

If you want to run this for multiple different sections, add a common class and a unique id to each form, select all of the sections, then run the function for each section.

This only runs once when the document loads and, as long as the content of the labels do not change, it should not have to be run again.

var formSelector = '.myForm';
var forms = document.querySelectorAll(formSelector) 

for(var form in Object.keys(forms)) {
    var selector = formSelector + '#' + forms[form].id + ' .input-group-addon:first-child';
    var labels = document.querySelectorAll(selector), longest = 0;

    for(var i in Object.keys(labels))
        longest = longest < labels[i].clientWidth ? labels[i].clientWidth : longest;

    var styleString = '@media screen and (max-width: 992px) { ' + selector + ' { min-width: ' + (+longest + 2) + 'px } }';

    var style = document.createElement('style');
    style.innerHTML = styleString;

    document.body.appendChild(style);
}

var formSelector = '.myForm';
var forms = document.querySelectorAll(formSelector) 

for(var form in Object.keys(forms)) {
    var selector = formSelector + '#' + forms[form].id + ' .input-group-addon:first-child';
    var labels = document.querySelectorAll(selector), longest = 0;

    for(var i in Object.keys(labels))
        longest = longest < labels[i].clientWidth ? labels[i].clientWidth : longest;

    var styleString = '@media screen and (max-width: 992px) { ' + selector + ' { min-width: ' + (+longest + 2) + 'px } }';

    var style = document.createElement('style');
    style.innerHTML = styleString;

    document.body.appendChild(style);
}

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<form class="myForm" id="myForm1">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-6" style="padding:1%;">
        <div class="input-group input-group-lg">
          <span class="input-group-addon">Pickup Docket</span>
          <input id="pickDoc" type="text" class="form-control">
        </div>
      </div>
      <div class="col-md-6" style="padding:1%;">
        <div class="input-group input-group-lg">
          <span class="input-group-addon">Delivery docket required </span>
          <input type="button" class="form-control" />
        </div>
      </div>
    </div>
  </div>
</form>
<form class="myForm" id="myForm2">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-6" style="padding:1%;">
        <div class="input-group input-group-lg">
          <span class="input-group-addon">Pickup Docket</span>
          <input id="pickDoc" type="text" class="form-control">
        </div>
      </div>
      <div class="col-md-6" style="padding:1%;">
        <div class="input-group input-group-lg">
          <span class="input-group-addon">Something else </span>
          <input type="button" class="form-control" />
        </div>
      </div>
    </div>
  </div>
</form>