Twitter Bootstrap 3 - feedback glyphicons are shifted

Question

When I put 2 fields in a row, their glyphicons are being shown with a nasty offset:

<div class="form-inline">
  <div class="form-group col-xs-6 has-feedback has-error">
    <input data-placeholder="Your Latitude" id="latitude" name="latitude" type="text" class="form-control">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
  <div class="form-group col-xs-6 has-feedback has-error">
    <input data-placeholder="Your Longitude" id="longitude" name="longitude" type="text" class="form-control">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
</div>

The full JSFiddle is here: https://jsfiddle.net/v_melnik/f8u9hvLa/6/

Is there a way to make them being shown properly?

Lots of thanks to everyone!

UPDATE: Someone marked this question as a duplicate of this one. But this question isn't about adding a glyhicon, it's rather about using glyphicons with a "narrowed" input box.

Possible duplicate of [Add Bootstrap Glyphicon to Input Box](http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box) — mayersdesign, Mar 16 '17 at 11:45
By the way, the fields are being aligned a bit better when I use the `row` class for the outer `div`, but glyphicons are still shifted: https://jsfiddle.net/v_melnik/t3bdhzbk/1/ — Volodymyr Melnyk, Mar 16 '17 at 12:06
@mayersdesign, I have to disagree: my question is not about adding a glyphicon to the input box, it's about its alignment which works fine when the box has the full width and being broken when the box has the `col-*-*` class. — Volodymyr Melnyk, Mar 16 '17 at 12:09

score 1 · Accepted Answer · edited Mar 16 '17 at 11:52

1

change your html

    <div class="form-inline">
      <div class="col-xs-6">     
      <div class="form-group has-feedback has-error">
        <input data-placeholder="Your Latitude" id="latitude" name="latitude" type="text" class="form-control">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
      </div>
      <div class="col-xs-6">
      <div class="form-group has-feedback has-error">
        <input data-placeholder="Your Longitude" id="longitude" name="longitude" type="text" class="form-control">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
      </div>
    </div>

jsfiddle

edited Mar 16 '17 at 11:52

bhansa

7,282
3
30
55

answered Mar 16 '17 at 11:47

Ankit Singh

1,477
1
13
22

can you give an example ? – bhansa Mar 16 '17 at 11:48
Thank you, it seems to be the most suitable (as on my taste) solution. – Volodymyr Melnyk Mar 16 '17 at 12:44

bhansa · Answer 2 · 2017-03-16T11:57:10.363

1

Use position:absolute for glyphicon.

.glyphicon-remove::before {
    left: 0;
    position: absolute;
}

DEMO

edited Mar 16 '17 at 11:57

answered Mar 16 '17 at 11:49

bhansa

7,282
3
30
55

score 1 · Answer 3 · answered Mar 16 '17 at 11:57

only for Mobile Device Because you can use xs class. Add Style.

.form-control-feedback
{
  right: 7px;
}

Fiddle Demo

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.form-control-feedback
{
  right: 7px;
}
.

<!-- We'll use col-xs-* here, as JSFiddle's result window is really narrow -->
<div class="ibox col-xs-12">
  <div class="ibox-content">
    <form action="#">
      <div>
        <label>Location</label>
        <div class="form-inline">
          <div class="form-group col-xs-6 has-feedback has-error">
            <input data-placeholder="Your Latitude" id="latitude" name="latitude" type="text" class="form-control">
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
          </div>
          <div class="form-group col-xs-6 has-feedback has-error">
            <input data-placeholder="Your Longitude" id="longitude" name="longitude" type="text" class="form-control">
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Twitter Bootstrap 3 - feedback glyphicons are shifted

3 Answers3