41

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

5
  • I put your code into a jsfiddle.net/fdB5Q - cannot reproduce though. Aug 7, 2012 at 22:51
  • @JonasG.Drange I tried putting it in jsfiddle, but because of all the windows it's not wide enough to show, at least on my monitor. Is there a way to collapse the jsfiddle controls?
    – scw
    Aug 8, 2012 at 2:06
  • Sorry, have no idea. You figured it out, though. Good on you! Aug 8, 2012 at 7:31
  • From the jsfiddle top menu bar, Share - > Share full screen result. Gives you the link to open just the result. More info/options here: doc.jsfiddle.net/use/embedding.html
    – scw
    Sep 10, 2012 at 19:44
  • The same may happen if you are using form-inline Nov 11, 2017 at 13:54

8 Answers 8

62

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>
1
4

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.

3
  • This did not work for me. It works in jsfiddle, but I couldn't get the screen wide enough to test it on jsfiddle on my laptop.
    – scw
    Aug 8, 2012 at 2:04
  • This code works, you have option in jsfiddle to open preview on fullscreen. (Share button) jsfiddle.net/fdB5Q/1/embedded/result Aug 8, 2012 at 15:07
  • It works, but removes the padding from any placeholder inside the input element.. Nov 23, 2012 at 14:25
4

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.

4
  • Best method I found for this issue. Clean and utilizes built-in classes made available by the bootstrap.
    – Jeff
    Sep 6, 2012 at 13:50
  • Adding span4 to the input class stops the field from overflowing the container, but it makes the input class too narrow. Unless I implemented it wrong? jsfiddle.net/cGuCD/5/embedded/result%2Chtml%2Ccss%2Cjs @jeff
    – scw
    Sep 10, 2012 at 20:48
  • Similar issue with using the relative sizing classes - anything smaller that input-xlarge is too narrow when the window is maximized on a normal computer screen.
    – scw
    Sep 10, 2012 at 20:49
  • This doesn't fix the problem it simply masks it by making the input smaller. It should still confine itself to the width of its container at span12
    – dpsthree
    Mar 2, 2015 at 15:40
1

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.

1

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.

0

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.

0

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.

0

For anyone to find

Html:

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

CSS:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.