Bootstrap. Prepended and appended input. How to max input field width?

Question

I am using Bootstrap from twitter. What I want is to make a prepended text, and input field and a button, but I want my input field have the max available width so that the right edge of the submit button was near the right edge of the well. From the bootstrap documentation there is the .input-block-level class that lets any or element behave like a block level element, but applying it to the input gives in result the central input the size of the well. http://jsfiddle.net/Uc4CE/

<div class="well">
<div class="input-prepend input-append">
  <span class="add-on">Some text</span>
  <input class="input" type="text" name="xxx" value="xxx" />
  <input type="hidden" name="next" value="xxx" />
  <input type="submit" value="xx" class="btn btn-info" />
</div>
</div>

Answer 1

EDIT : Please note, that this answer is valid for Bootstrap v2.3.x. Bootstrap 3 already solves this natively (see doc).

Inspired by A lee's answer, here is my kinda improved solution (includes both append and prepend, minimum possible add-on width, removed unnecessary styles, auto height...). Include this after Bootstrap CSS/LESS files:

.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 */
  -moz-box-sizing: border-box; /* for Firefox */
  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;
}

Use it like this in your HTML and remember, you have to use a tags not button for your buttons in this case:

<div class="input-append input-block-level">
  <input type="text" />
  <a class="btn add-on">click</a>
</div>

Edit: In IE8, if you set display: table in .input-append.input-block-level > input, the input tag becomes uneditable despite taking focus.

Completely omitting this display: parameter makes it work as expected in IE8 as well as current Chrome/Safari/Firefox.

Answer 2

I was looking for something similar and this solution from https://gist.github.com/mattjorn/5020957 worked for me - add .input-block-level to your outer div, e.g.,

<div class="input-prepend input-append input-block-level">

and then extend the bootstrap CSS like this:

.input-prepend.input-block-level {
  display: table;
  width: 100%;
}

.input-prepend.input-block-level .add-on {
  display: table-cell;
  background-color: white;
}

.input-prepend.input-block-level > input {
  box-sizing: border-box;
  height: 30px;
  display: table-cell;
  width: 100%;
  border-left-style: none;
}