CODEWITHSUNDEEP
csstwitter-bootstrapchromium
Sandro
Sandro

Reputation: 2259

Inputfield is breaking out of its column (fluid container and row)

I'm using bootstrap to create two column layout. I want a form in the first column. When I reduce the size of container the input text field doesn't get re-sized and eventually breaks out of the column. Why do input fields break out columns?

Here is an example of this behavior:

<div class="container-fluid">
      <div class="row-fluid">
           <div class="span4">
               <div class="well">
                   <form>
                       <input type="text" />
                   </form>
               </div>
          </div>
          <div class="span8">
             Notice how I am to the left of the well, but the input field breaks out of the well and column. And I'm overlapping with the input field!
          </div>
      </div>
  </div>

This simple example shows the behavior: http://jsfiddle.net/xhHQD/1/

I am using chrome.

Upvotes: 0

Views: 1132

Answers (1)

Joshua Hamilton
Joshua Hamilton

Reputation: 169

To answer your question, text fields will break out of the boundries of their parent simply because they can't wrap like text would. You could override the CSS width property to get it to the exact width you like or try chaning it to a block-level element.

To have your field resize to fit within its parent add the class "input-block-level" to it:

<input type="text" class="input-block-level" />

See this and more examples on the Bootstrap Base CSS page.

Upvotes: 1

Related Questions