Björn C Björn C - 11 months ago 35
CSS Question

Bootstrap input-group -> input with addon & help text, addon height?

I have a HTML input.

The small help text i populate with Jquery.

My problem is that the

input-group-addon
height will stretch all way down to the
small
element. I´d like it to be as high as the input.

How can i solve this?

<div class="input-group">
<div class="input-group-addon">Obj. Nr</div>
<input type="text" class="form-control">
<small class="form-text text-muted"></small>
</div>


enter image description here

Answer Source

Just add small element after input

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-6">
  <div class="input-group">
       <div class="input-group-addon">Obj. Nr</div>
       <input type="text" class="form-control">     
  </div>
  <small class="form-text text-muted">Small element</small>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download