All geek questions in one place

Input-group-addon: how to align width

In small-sized browsers, input groups will wrap up, and the different sizes of the two inputs / inputs - this is painfully obvious.

Is it possible 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>
Run codeHide result
+4
source share
2 answers

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

Select all .input-group-addonthat are the first descendant of their parent, then scroll through them to find the longest.

, , , (992px), , , ( ).

width min-width, .

window.onresize

, 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>
Hide result

, , , .

, , , .

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>
Hide result
+2

@media css

@media all and (max-width: 481px) {
  /* main finctionality style */
  .input-group, 
   .input-group .input-group-addon,
  .input-group .form-control {
    display: block;
    width: 100%;
  }
  
    /* style right border */
    .input-group .input-group-addon:first-child {
        border: 1px solid #CCC;
        border-radius: 4px;
    }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.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>
Hide result
0

Source: https://habr.com/ru/post/1606516/

More articles:


All Articles