Blog



input-append and input-prepend with input-block-level – Bootstrap 2.3.2 – form-horizontal

If you’re looking for a solution to display input-append and input-prepend with input-block-level in Twitter Bootstrap 2.3.2, look no further.

In this example we are using Bootstrap form-horizontal.
See below the layout you should get by default using Bootstrap form-horizontal.
(The first 2 fields already have the class=”input-block-level” added to them)

default-bootstrap-form-horizontal-layout

Our aim here is to have all the fields justified left and right.
This is the HTML code for the appends / prepend:

<div class="control-group">
  <label class="control-label">Append</label>
  <div class="controls">
    <div class="input-append">
      <input type="text">
      <span class="add-on"><i class="icon-calendar"></i></span>
    </div>
  </div>
</div>

<div class="control-group">
  <label class="control-label">Prepend</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-calendar"></i></span>
      <input type="text">
    </div>
  </div>
</div>

<div class="control-group">
  <label class="control-label">Prepend / Append</label>
  <div class="controls">
    <div class="input-prepend input-append">
      <span class="add-on"><i class="icon-calendar"></i></span>
      <input type="text" >
      <span class="add-on"><i class="icon-calendar"></i></span>
    </div>
  </div>
</div>

input-append and input-prepend with input-block-level

 

If you’ve been using Twitter Bootstrap forms in the past, your instinct to align them and fill the gap would be to add the class=”input-block-level”. And you would be right. So let’s just do that. Add the class=”input-block-level” to the append/prepend like this:

<div class="control-group">
  <label class="control-label">Append</label>
  <div class="controls">
    <div class="input-append input-block-level">
      <input type="text">
      <span class="add-on"><i class="icon-calendar"></i></span>
    </div>
  </div>
</div>

<div class="control-group">
  <label class="control-label">Prepend</label>
  <div class="controls">
    <div class="input-prepend input-block-level">
      <span class="add-on"><i class="icon-calendar"></i></span>
      <input type="text">
    </div>
  </div>
</div>

<div class="control-group">
  <label class="control-label">Prepend / Append</label>
  <div class="controls">
    <div class="input-prepend input-append input-block-level">
      <span class="add-on"><i class="icon-calendar"></i></span>
      <input type="text">
      <span class="add-on"><i class="icon-calendar"></i></span>
    </div>
  </div>
</div>

 

As you can see below, it’s not doing what was expected, it’s actually not doing anything at all…

default-bootstrap-form-horizontal-layout

 

But we’re getting there… We now need to add some extra CSS to cater for it as Bootstrap 2.3.2 doesn’t deal with it by default.


/* Input-append and input-prepend with inline-block-level */

.input-append.input-block-level,
.input-prepend.input-block-level {
    display: table;
}

.input-append.input-block-level .add-on,
.input-prepend.input-block-level .add-on {
    display: table-cell;
    width: 1%; /* remove this if you want default bootstrap button width */
}

.input-append.input-block-level > input,
.input-prepend.input-block-level > input {
    box-sizing: border-box; 
    display: table; 
    min-height: inherit;
    width: 100%;
}

.input-append.input-block-level > input {
    border-right: 0; /* removes the extra right border from the input */
}

.input-prepend.input-block-level > input {
    border-left: 0; /* removes the extra left border from the input */
}

 

And the result… Tada!

css-append-prepend-input-block-level-bootrstrap

 

In Summary:

  1. Add the class “input-block-level” to the div with the class=”input-append”  (or “input-prepend”) like this: <div class=”input-prepend input-block-level”>.
  2. Copy and paste the CSS above in your stylesheet
  3. Enjoy 🙂

IT Support Newcastle is brought to you by Transcendit Ltd, contact us on 0191 482 0444