CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
scw
scw

Reputation: 5650

Why do my Twitter Bootstrap form fields overflow their well using fluid container?

UPDATE: Demo of problem here: http://jsfiddle.net/fdB5Q/embedded/result/

From about 767px to 998px, the form fields are wider than the containing well.

Smaller than 767px and the entire form area shifts to a new line. The page rendered when the browser window is about 200px wide displays perfectly. The form fields shrink as you would expect.

For a visual, look at this very similar question: Twitter Bootstrap CSS static-fluid form positioning

Here's everything in the Head:

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

Here's everything in the Body:

<div class="container-fluid">

<div class="row-fluid">

<div class="span8">
<p>Some Content.</p>
</div>

<div class="span4">
  <div class="well">    
    <div class="control-group">
      <label class="control-label" for="name">Your Name</label>
      <div class="controls">
      <input type="text" class="input-xlarge" name="name" id="name" maxlength="100" />
      </div>
    </div>
  </div>
</div>

</div>

</div>

I think I am misunderstanding some part of the framework. Should I not be using a fluid container? What am I doing wrong? I could throw together something to fix this, but I think the problem may be that I am doing something wrong big picture.

I tried changing my spans to 7 and 5 and still had the same error. I tried 6 and 6, but at that point the page started to look ridiculous. The rest of the answers didn't make sense to me.

I changed the input class to large instead of xlarge. It still had a width range where it overflowed, and I really would like wider form fields if there is room on the display.

I want to avoid the horizontal scroll bar, and I want the page text to be the same size in landscape or portait mode on my smartphone.

UPDATE: Pictures

My problem page:

problem page

Simplified version:

simple version

Simplified version at 200 px browser width:

simple version at 200px width

Upvotes: 41

Views: 62266

Answers (8)

Sean Kelly
Sean Kelly

Reputation: 991

For anyone to find

Html:

<input class="form-control" placeholder="Threshold Type">

CSS:

.form-control { box-sizing: border-box; }

Upvotes: 0

The Software Barbarian
The Software Barbarian

Reputation: 459

The problem is more insidious than all this to get right, unfortunately. Using max-widths did nothing for me. And I hate things looking crappy, so I dug into it a little...

It comes down to these three lines in the css declaration of a form-control:

width: 100%;
padding: 6px 12px;
border: 1px solid #cccccc;

When the width of an text-type input element is set, the horizontal padding and border are added to the 100% instead of taken from it. So, if the 100% width w were say, 500px, then the width of the text input form control becomes w+12+12+1+1, 526px. The extra 26px are a constant which means unless the width percentage is calculated dynamically either as 100%*(w/(w+26px)) or 100%-26px, things will never come out even.

I personally believe this is an error in either the definition or implementation of the html/css interface (I don't know which, I really don't want to try to find the references in the shifting sands of the standards.) If you say an input field is going to be 100% width, then the correction needs to be applied to make the width inside the margins be 100%, not 100% without the horizontal padding and border widths included.

And, by the way, percentage value or fixed size doesn't matter; they're also off by 26px. You need to filter out these 26px from the width.

All is not lost for bootstrap textual inputs though, at least if you're using a CSS compiler that allows client side calculations. In less, for instance

input.form-control[type=text] {
  width: calc(~'100%-26px');
}

will make it all better. Note that email and password types (at least) have the same problem too.

26px is kind of brittle, of course, but the constants are hardcoded into the form-control declaration, so your hands are kind of tied. A test would be nice that checked the sizes of controls on rendering to catch CSS declaration changes on bootstrap upgrades, but not tonight, thank you.

Upvotes: 1

dpsthree
dpsthree

Reputation: 2285

I ran across this problem with form inputs and panel body. I answered it in the following item: Twitter Bootstrap: Stop input field extending beyond well

The problem for me was that the form was overflowing. This allowed the inputs to follow suit. By fixing the max-width of the form (max-width: 100%) I was able to fix inputs as well as any other content that may be placed inside the form.

Upvotes: 0

210 USA
210 USA

Reputation: 349

Just a bit of input after playing with these FOREVER (it seems). I use a simple width attribute and set it to between 85% and 95% depending on the container, padding and other css factors to keep the input fields from actually stretching to edge of the container.

.input-example {
   width: 90%; 
}

I AM NOT AN EXPERT AT THIS! I am just offering what I have learned and please do not take this as advice from a seasoned developer. Trying to give a little back to a community that has saved my life on countless occasions.

Upvotes: 1

Felby
Felby

Reputation: 4115

As indicated by Pavlo in this answer: Twitter Bootstrap: Stop input field extending beyond well

Using the class input-block-levelin place of the input-xlarge (or other sizes) solves the problem as well.

Upvotes: 0

Plus 8 Digital
Plus 8 Digital

Reputation: 49

I just came across this issue and a on checking the bootstrap docs for form inputs it states 'Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.'

My bootstrap row was set to span9 for content and span3 for the sidebar. Setting <input class='span3'/> solved the issue for me, the input boxes remain within the sidebar as the screen size reduced.

Upvotes: 4

Miljan Puzović
Miljan Puzović

Reputation: 5820

Usually I prefer to use another class="row-fluid" and class="span12" in elements with class="spanX" to get 100% width of some element. That will not cause bugs on different resolutions. So, I've added another row-fluid class in your element with span4 class, and inside that new row-fluid added div with span12. You must somethimes override default Bootstrap settings to get what you need, so I've added also class .my-input inside <input /> element to get 100% width and remove left and right padding (padding will cause bug on right side). And here is code:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
            <p>Some Content.</p>
        </div>
        <div class="span4 well">
            <div class="row-fluid">
                <div class="span12">
                    <label class="control-label" for="name">Your Name</label>
                    <input type="text" class="my-input" name="name" id="name" maxlength="100" />
                </div>
             </div>
        </div>
  </div>
</div>

and CSS class for override

​.my-input
{
    width: 100%;
    padding: 4px 0 4px 0 !important;
}​

You can see and Jsfiddle demo, try to resize screen.

​

Upvotes: 4

user1575941
user1575941

Reputation:

The input html tags and their corresponding .input-* styles only set the css width. This is by design.

But adding a css max-width:100% will ensure that too large inputs are kept under control.
e.g. add this to your Head:

<style>
    input {
        max-width: 100%;
    } 
</style>

Upvotes: 62

Related Questions