CODEWITHSUNDEEP
csstwitter-bootstrap
Philip Stratford
Philip Stratford

Reputation: 4753

Bootstrap form-horizontal overflows fixed width container

I realize that I'm using Bootstrap's form-horizontal class in a way that isn't quite documented, but I still don't understand why this doesn't work.

If I create a div with the form-horizontal class and add a couple of controls to it with widths specified using Bootstrap's grid layout classes, it works fine. For example, this displays as I'd expect:

HTML

<div id="container">
  <div class="form-horizontal">
    <div class="form-group">
      <div class="col-sm-11">
        <input type="text" class="input-sm form-control" placeholder="Enter some text">
      </div>
      <div class="col-sm-1 text-right">
        <button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-info-sign"></span></button>
      </div>
    </div>
  </div>
</div>

CSS

#container {
  padding:10px;
  background-color: gray;
}

The result is form which spans the full width of the page, with 10px of padding all around. Ideal, except that I want to contain the form within a div with a fixed width, and that's where it goes wrong.

Simply adding width:400px; to the #container class in the CSS causes the form to overflow the width of the div.

Is this a bug? How can I fix this so that the form stays within its container?

I've created an example fiddle here: http://www.bootply.com/pP9gsJQipi. Note that simply removing the width value from the #container class causes the form to display as desired, albeit at 100% width of the page.

Upvotes: 4

Views: 2000

Answers (1)

Hkidd
Hkidd

Reputation: 912

Simply add a width of 100% to the .form-group. The .form-group will now size 100% according to the width of the #container.

CSS

#container {
    padding:10px;
    background-color: gray;
    width: 400px;
}
.form-group {
    width:100%;
}

Bootply

Upvotes: 4

Related Questions