skip to Main Content

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.

3

Answers


  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

    Login or Signup to reply.
  2. Use position:absolute for glyphicon.

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

    DEMO

    Login or Signup to reply.
  3. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search