CODEWITHSUNDEEP
csstwitter-bootstrap
Muiter
Muiter

Reputation: 1520

Bootstrap smaller input and smaller input-group-addon issue

I have used this in my CSS to create an smaller input field:

.input-xs {
  height: 22px;
  padding: 2px 5px;
  font-size: 12px;
  line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
  border-radius: 3px;
}

But of course I need to adjust the input-group-addon as well or it will look like this.

To prevent this and make the input-group-addon smaller, I have added this to my CSS.

.input-group-xs > .form-control,
.input-group-xs > .input-group-addon,
.input-group-xs > .input-group-btn > .btn {
  height: 22px;
  padding: 2px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

But it looks like this now.

Any suggestions to get it aligned again?

Complete code

<div class="input-group-xs form-group" id="div_exp_aantal['.$i.']">
  <input type="number" min="0" class="form-control input-xs" id="exp_aantal['.$i.']" name="exp_aantal" placeholder="Huidige aantal" value="'.$row_list['aantal_huidig'].'" onkeyup="validate_exp(this, '.$i.')" onmousemove="validate_exp(this, '.$i.')">
  <span class="input-group-addon">stuk</span>
</div>

Upvotes: 0

Views: 1202

Answers (1)

David Picksley
David Picksley

Reputation: 266

If I were you, I'd add the class name "input-group" before the "input-group-xs" in order to add the base css.

.input-group {
position: relative;
    display: table;
    border-collapse: separate;
}

So your code should look like this:

<div class="input-group input-group-xs form-group" id="div_exp_aantal['.$i.']">
  <input type="number" min="0" class="form-control input-xs" id="exp_aantal['.$i.']" name="exp_aantal" placeholder="Huidige aantal" value="'.$row_list['aantal_huidig'].'" onkeyup="validate_exp(this, '.$i.')" onmousemove="validate_exp(this, '.$i.')">
  <span class="input-group-addon">stuk</span>
</div>

Upvotes: 1

Related Questions