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

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

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/

Some text


Solutions/Answers:

Solution 1:

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;
}

Solution 2:

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

Related:  Twitter Bootstrap inline form spacing

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.

Related:  Constraining image height with bootstrap responsive image?

Solution 3:

may be use for div class="input-prepend input-append" additional style margin-right

result for your code:

<div class="well">
    <div class="input-prepend input-append" style="margin-right: 108px;">
        <span class="add-on">Some text</span>
        <input class="input-block-level" type="text" name="xxx" value="xxx" />
        <input type="hidden" name="next" value="xxx" />
        <input type="submit" value="xx" class="btn btn-info" />
    </div>
</div>

http://jsfiddle.net/Uc4CE/1/

Solution 4:

There is a fix for this in the 3.0 branch of Twitter Bootstrap as per @mdo’s comment on this issue.

However, I use the following javascript in my projects in the meantime when I output a django-crispy forms layout within a <div class="span4">. This accounts for responsive designs.


example HTML

<div class="row-fluid">
    <div class="span4">
        {% crispy form %}
    </div>
</div>

style.css

/* I also set this to account for smaller widtsh */

form fieldset {
    width:100%
}

fix.js

NOTE: I trigger this with window resizings as well.

References