Using input-block-level with input-prepend in Twitter Bootstrap 2.3.2

Question

I'm wondering how to make an input field fill available width with input-prepend icons in twitter bootstrap 2.3.2 with responsive layout?

there is a css style in bootstrap input-block-level witch works fine until you prepend your input with an icon... How to get same functionality with prependet input?

<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-prepend ">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text" class="input-block-level">
    </div>
  </div>
</div>
<div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password" class="input-block-level">
    </div>
</div>

here is example of code illustrating this problem : http://jsfiddle.net/r3CyL/

Conventioneer

Answer 1

You need to add a little extra CSS

DEMO jsFiddle

.input-prepend.input-block-level {
  display: table; 
}
.input-prepend.input-block-level .add-on {
  display: table-cell;
}
.input-prepend.input-block-level > input {
  width: 100%;
}

You could add border color to input-prepend.input-block-level .add-on { to improve it's appearance.

input-prepend.input-block-level .add-on {
    display: table-cell;
    border-right: #fff;
}

EDITED

Another more involved way of doing it. This is also Bootstrap aproved.

DEMO jsFiddle

.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; /* use bootstrap mixin or include vendor variants */
  display: table; /* table-cell is not working well in Chrome for small widths */
  min-height: inherit;
  width: 100%;
}

.input-append.input-block-level > input {
  border-right: 0;
}

.input-prepend.input-block-level > input {
  border-left: 0;
}

Lonna

I had a look at your fiddle and fixed your issue. It works now. – Lonna

Did not work correctly for me. The icons were not correctly positioned. Wrapping them in a div/span/whatever and giving the wrapper the class add-on solved it for me: jsfiddle.net/M6EAY/11 – Selena