Bootstrap input-group grid alignment not working on Chrome

Question

I'm using Bootstrap 3 and trying to use a input-group with a non-grouped inputs on same form grid. It works well on IE and FF, but in Chrome the grid alignment is lost. Is there a Chrome bug or I'm doing something wrong?

<form>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input1">Input1</label>
    <input type="text" class="form-control" id="input1" name="input1">
  </div></div>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input2">Input2</label>
    <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input type="text" class="form-control" id="input2" name="input2">
    </div>
  </div></div>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input3">Input3</label>
    <input type="text" class="form-control" id="input3" name="input3">
  </div></div>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input4">Input4</label>
    <input type="text" class="form-control" id="input4" name="input4">
  </div></div>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input5">Input5</label>
    <div class="input-group">
    <span class="input-group-addon">Go!</span>
    <input type="text" class="form-control" id="input5" name="input5">
    </div>
  </div></div>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input6">Input6</label>
    <input type="text" class="form-control" id="input6" name="input6">
  </div></div>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input7">Input7</label>
    <input type="text" class="form-control" id="input7" name="input7">
  </div></div>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input8">Input8</label>
    <input type="text" class="form-control" id="input8" name="input8">
  </div></div>

</form>

JSFiddle sample

Image sample

works with my chromium 57, what version of chrome are you using ? — niceman, Mar 27 '17 at 15:46
do you have a picture what is wrong and what you expect? in your fiddle jquery is loaded after bootsrap so you get a error in the console — tire0011, Mar 27 '17 at 15:52
I'm using Chrome v 57.0.2987.110, jQuery 3.2.1 and Bootstrap 3.3.7 — Giba Nasser, Mar 27 '17 at 16:17
Thanks @tire0011, I made a [new fiddle sample](https://jsfiddle.net/gtnasser/hfbs52mm/ ) — Giba Nasser, Mar 27 '17 at 16:37
Looks okay to me. Do you have any extra CSS that may be affecting it? Also, you don't need those extra `.col-xs-4` elements - just attach that class to the `.form-group`s: https://jsfiddle.net/oxe70ocx/ — J. Titus, Mar 27 '17 at 16:44
@J.Titus You can check how your fiddle looks to me: https://turko.com.br/stackoverflow/fiddle-oxe70ocx.png — Giba Nasser, Mar 27 '17 at 17:18
@GibaNasser I bet your "Make text and icons larger or smaller" setting in Windows is set to `Medium` which defaults to `125%`. Coincidentally, zooming to 125% in my browser produces the same effect as what you see. — J. Titus, Mar 27 '17 at 17:28
You're right @J.Titus, my windows config is not default. Fortunately ZimSystem has a solution that I don't need to change my windows config. Thank you guys! — Giba Nasser, Mar 27 '17 at 17:48

score 2 · Accepted Answer · edited May 23 '17 at 11:46

I don't know what's causing the input add-on to be larger, but this is the classic height problem with floats. You need a clearfix.

In CSS, like this:

.form-group.col-xs-4:nth-child(3n+1) {
   clear:left;
}

Or, in HTML like this:

<form>
    <div class="form-group col-xs-4">
        <label class="control-label" for="input1">Input1</label>
        <input type="text" class="form-control" id="input1" name="input1">
    </div>
    <div class="form-group col-xs-4">
        <label class="control-label" for="input2">Input2</label>
        <div class="input-group">
            <input type="text" class="form-control" id="input2" name="input2">
            <span class="input-group-addon big"><strong>Go!</strong></span>
        </div>
    </div>
    <div class="form-group col-xs-4">
        <label class="control-label" for="input3">Input3</label>
        <input type="text" class="form-control" id="input3" name="input3">
    </div>
    <div class="clearfix"></div>
    <div class="form-group col-xs-4">
        <label class="control-label" for="input4">Input4</label>
        <input type="text" class="form-control" id="input4" name="input4">
    </div>
    <div class="form-group col-xs-4">
        <label class="control-label" for="input5">Input5</label>
        <div class="input-group">
            <span class="input-group-addon">Go!</span>
            <input type="text" class="form-control" id="input5" name="input5">
        </div>
    </div>
    <div class="form-group col-xs-4">
        <label class="control-label" for="input6">Input6</label>
        <input type="text" class="form-control" id="input6" name="input6">
    </div>
    <div class="clearfix"></div>
    <div class="form-group col-xs-4">

        <label class="control-label" for="input7">Input7</label>
        <input type="text" class="form-control" id="input7" name="input7">

    </div>
    <div class="form-group col-xs-4">

        <label class="control-label" for="input8">Input8</label>
        <input type="text" class="form-control" id="input8" name="input8">

    </div>
</form>

Demo

My windows configuratios (Make text and icons larger or smaller: 125%) caused the input add-on to be large. The clearfix solved the problem! Thanks. — Giba Nasser, Mar 27 '17 at 17:57

Bootstrap input-group grid alignment not working on Chrome

1 Answers1