Twitter Bootstrap Issue: Input field overflow (non-responsive)

StackOverflow https://stackoverflow.com/questions/18192247

Question

I'm building a site using twitter bootstrap and I'm working on a center aligned form-horizontal that is responsive... However, the input fields overflow at certain browser widths. Is there an easy way to fix this without messing around with media-queries, perhaps I'm missing something in my markup? I'm using v. 2.3.2 and here is my code, THE HTML:

<!DOCTYPE HTML>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" charset="utf-8" href="css/bootstrap.css"/>
<link type="text/css" rel="stylesheet" charset="utf-8" href="css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" charset="utf-8" href="css/bootstrap-responsive.css"/>
<link type="text/css" rel="stylesheet" charset="utf-8" href="css/bootstrap-responsive.min.css"/>
<link type="text/css" rel="stylesheet" charset="utf-8" href="override.css"/>
</head>
<body class="home">
<header class="navbar navbar-static-top push">
    <div class="navbar-inner navfix">
        <div class="container-fluid">
            <a class="brand" href="#">The Limos</a>
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="nav-collapse collapse">
                <ul class="nav nav-pills pull-right">
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </div>
        </div>
    </div>
</header>
<div class="row-fluid input-wrap">
    <div class="span4"></div>
    <div class="span4 center-wrap">
        <form class="form-horizontal">
            <fieldset>
                <legend>Get Started Today</legend>
                <div class="leftfix">
                    <div class="control-group row-fluid">
                        <label class="control-label">Date/Time</label>
                        <div class="controls">
                            <input type="text" placeholder="Date/Time...">
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label">Your Name:</label>
                        <div class="controls">
                            <input type="text" placeholder="Your Name...">
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label">Your Email:</label>
                        <div class="controls">
                            <input type="text" placeholder="Your Email...">
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label">Phone #:</label>
                        <div class="controls">
                            <input type="text" placeholder="Phone #...">
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label">Zip Code:</label>
                        <div class="controls">
                            <input type="text" placeholder="Zip Code...">
                        </div>
                    </div>
                </div>
                <br />
                <button type="submit" class="btn">Submit</button>
            </fieldset>
        </form><br />
    </div>
    <div class="span4"></div>
</div>
</body>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src="js/bootstrap.js"></script>
</html>

THE OVERRIDE-CSS:

.right-align {
text-align: right;
}
.inline-block {
display: inline-block;
}
.homelogo {
padding-top: 15px;
padding-left: 20px;
font-size: 26px;
}
.homenav {
padding-top: 15px;
padding-right: 20px;
margin-bottom: 0px !important;
font-size: 16px;
}
.navfix {
background: rgba(0, 0, 0, 0.0);
background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
zoom: 1;
border-bottom: 0;
}
.home {
background: #000000;
}
.navbar .brand {
text-shadow: 0 1px 0 #333333;
}
.navbar .nav>li>a{
background: #666666;
border-radius: 5px;
color: #000000;
text-shadow: 0 1px 0px #666666;
}
.navbar .nav>li>a:hover {
background: #cccccc;
}
.push {
margin-top: 55px;
}
.input-wrap .center-wrap {
margin-top: 100px;
background: #cccccc;
border: 1px #999999;
border-radius: 5px;
}
.leftfix {
text-align: left;
}
input {
max-width: 100% !important;
}
.form-horizontal > fieldset {
padding: 10px;
}

Images of broken layout: Broken and Ugly I'd like it to stay looking like this

Was it helpful?

Solution

Hmmm...to be honest, I didn't find a good workaround aside from partially overriding the Twitter Bootstrap CSS. The issue is that the width of a responsive .span4 (the element your form is contained in) can end up being much smaller than the combined, hard-coded widths and margins of the <label> and <input> elements in the form.

These elements do have an alternate layout, where the <label> stacks above the <input>, which would fit adequately inside a .span4. However, this CSS is not applied until a sufficiently narrow screen width is reached, via media query. (If you make the screen much narrower, you'll see this change happen.)

You could write another media query that applies these styles at a different screen width (for when the viewport is still pretty wide, but the .span4 is too narrow), but since you don't want to bother too much with those, I went down a different route.

So the definitions I added to your overriding CSS were:

.form-horizontal .control-label{
    text-align:left;
    padding-top: 5px;
    margin-right:20px;
    width:80px;
}
.form-horizontal .controls{
    float:left;
    margin-left: 0;
}

You'll note that this removes/overrides a lot of the extra width and margins I mentioned earlier. So, your form will end up looking a bit different (the extra space on the left is gone, and a bit of text alignment was changed). Now though, the elements will collapse into a "small-screen" layout relative to the narrowness of their parent, rather than to that of the viewport. Of course, feel free to not use this solution if you feel that the design alterations outweigh the responsiveness.

If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top