Bootstrap 4.0 input-group-append and prepend show wrong height

Question

I'm working with Bootstrap 4 and I'm having a problem that I can not solve. The input-group-append and input-group-prepend increase their height size when the resolution of the screen is reduced. You can check the issue on the next animated gif:

I have read the input-group documentation but I do not find any problem with my current code, shown on the next snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<hr/>
<div class="row">    
  <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
    <div class="row">
    
      <div class="input-group input-group-sm mb-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <div class="input-group-prepend">
          <span class="input-group-text" id="testPot">Potencia</span>
        </div>
        <select class="custom-select custom-select-sm">
          <option value="value">text</option>
        </select>
      </div>
        
      <div class="input-group input-group-sm mb-3 col-xl col-lg col-md col-sm col">
        <input type="text" class="form-control">
        <div class="input-group-append">
          <span class="input-group-text">KVA</span>
        </div>
      </div>
    
      <div class="input-group input-group-sm col-xl col-lg col-md col-sm col mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">Y</span>
        </div>
        <input type="text" class="form-control" name="name" value=""/>
        <div class="input-group-append">
          <span class="input-group-text">KVA</span>
        </div>
      </div>

    </div>
  </div>
</div>
<hr/>

This is, also, the codepen link where I recorded the gif, in case you need another source to reproduce the issue.

Am I doing something wrong or is it a bootstrap problem? how can I fix it?

Thanks!

Answer 1

I think your problem is that the width of the elements inside the columns don't fit on they, so they break on multiples lines. If you add some border classes you will notice this. Check the next example, where I have reduced the classes needed for your original approach (showing the issue):

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<hr/>

<div class="container-fluid">
<div class="row">

  <div class="col-4">
  <div class="row">

    <div class="input-group input-group-sm mb-3 col-md-6 border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text" id="testPot">Potencia</span>
      </div>
      <select class="custom-select custom-select-sm form-control">
        <option value="value">text</option>
      </select>
    </div>

    <div class="input-group input-group-sm mb-3 col border border-info">
      <input type="text" class="form-control">
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

    <div class="input-group input-group-sm mb-3 col border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text">Y</span>
      </div>
      <input type="text" class="form-control" name="name" value="" />
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

  </div>
  </div>

</div>
</div>

<hr/>

Now, since you are wrapping all of your inputs inside a col-4 and that is 1/3 of the screen width (because grid system have 12 columns), I think the best you can do is put they all on col-12 wrappers and split they on multiple lines, or alternatively, increase the size of the main wrapper. Check the next two examples showing both approachs:

Example 1: Inputs groups on col-12 wrappers

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<hr/>

<div class="container-fluid">
<div class="row">

  <div class="col-4">
  <div class="row">

    <div class="input-group input-group-sm mb-3 col-12 border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text" id="testPot">Potencia</span>
      </div>
      <select class="custom-select custom-select-sm form-control">
        <option value="value">text</option>
      </select>
    </div>

    <div class="input-group input-group-sm mb-3 col-12 border border-info">
      <input type="text" class="form-control">
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

    <div class="input-group input-group-sm mb-3 col-12 border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text">Y</span>
      </div>
      <input type="text" class="form-control" name="name" value="" />
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

  </div>
  </div>

</div>
</div>

<hr/>

Example 2: Increase main wrapper width

On next example I use col-8 on the main wrapper, but you can try with another sizes of the column.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<hr/>

<div class="container-fluid">
<div class="row">

  <div class="col-8">
  <div class="row">

    <div class="input-group input-group-sm mb-3 col-md-6 border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text" id="testPot">Potencia</span>
      </div>
      <select class="custom-select custom-select-sm form-control">
        <option value="value">text</option>
      </select>
    </div>

    <div class="input-group input-group-sm mb-3 col border border-info">
      <input type="text" class="form-control">
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

    <div class="input-group input-group-sm mb-3 col border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text">Y</span>
      </div>
      <input type="text" class="form-control" name="name" value="" />
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

  </div>
  </div>

</div>
</div>

<hr/>

Answer 2

Try with this: HTML:

<div class="search-block" style="display:inline-block;position:relative;">
      <div class="form-input-icon form-input-icon-right">
        <i>KVA</i>
         <input type="text" class="form-control form-control-sm form-control-rounded">
       <button type="button" class="search-block-submit"></button>
    </div>

css:

.form-input-icon > i {
    position: absolute;
    z-index: 1 !important;
    margin: 11px 2px 4px 10px;
    z-index: 3;
    width: auto;
    font-size: 15px;
    text-align: center;
    left: 0;

}

.form-input-icon .form-control {
    padding-left: 34px;
}

.form-input-icon.form-input-icon-right > i {
    left: auto;
    right: 3px;
    margin: 11px 10px 4px 2px;
}

.form-input-icon.form-input-icon-right .form-control {
    padding-left: 16px;
    padding-right: 35px;
}

.search-block {
    position: relative;
}

.search-block .form-input-icon > i {
    margin-top: 5px;
}

.search-block .search-block-submit {
    position: absolute;
    top: -1px;
    right: 0px;
    height: 38px;
    width: 38px;
    background: none;
    border: none;
    z-index: 4;
    cursor: default;
}

working plunker: http://plnkr.co/edit/kllOdHc7SKeyrC9ZMuzT?p=preview