How do I make a simple row with a form-control without getting a horizontal scrollbar?
It seems that whatever I do with bootstrap 3, any "fluid" row that should be 100% is actually going beyond its container which introduces a horizontal scrollbar. How do I stop this and make it fit into its container?
Example:
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<input type="text" required="" class="form-control" placeholder="Enter something" id="foo" name="foo">
</div>
</div>
</div>
jsfiddle: http://jsfiddle.net/qnb3q40g
Your code is working fine with bootstrap 3.2.0
DEMO
.container-fluid .row {
margin-left: 0;
margin-right: 0;
}
For some reason when using container-fluid bootstrap doesn't take into account that it is using a negative margin on rows. So by adding the css above it will fix your issue.
Demo -http://jsfiddle.net/MeycD/537/
You can do it in this way also if you want.
<div class="container">
<div class="row">
<div class="col-xs-5 col-lg-1">
<input type="text" class="form-control input-normal" />
</div>
</div>
</div>
Related
I am trying to achieve above on the webpage with this:
<div class="columns">
<div class="column">
<div class="field">
<div class="control"><input type="text" class="input">
</div>
</div>
</div>
<div class="column">
<div class="select">
<select>
<option>January</option>
</select>
</div>
</div>
<div class="column">
<div class="field">
<div class="control"><input type="text" class="input">
</div>
</div>
</div>
</div>
But am getting this:
Am using bulma columns and form controls. Can you please help me, I need to horizontally pack elements at various places if you have any other good way to achieve it please let me know.
When using columns in bulma, you should know that all columns will be of equal width. See here:
Each column will have an equal width, no matter the number of columns.
That is also the case in your case. The columns are equal in size. The content of the columns, however, is not equal. The input elements have width:100% whereas the select does not.
To fix it, simply add width:100% to the select and its .select container:
.select,
select{
width:100%;
}
Using this code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<label class="col-2 col-form-label">Email</label>
<div class="col-8">
<input type="text" class="form-control">
</div>
<div class="col-2">
text
</div>
</div>
</div>
If you resize the window to the smallest size, the grid breaks.
Here is the Bootply link.
Just open the preview and resize your window to the smallest size, and the grid will break.
3 columns must stay in the same row, but in the smallest size, the last column shifts to the bottom row.
This happens in both versions (4 & 3.7 (col-xs-2))
how can this be fixed?
The columns can't shrink in width less than 30px (due to padding) so, as screen width narrows, eventually the columns wrap (stack vertically). To prevent this, adjust the padding on the columns inside the row. Bootstrap 4 has a no-gutters class for this purpose...
https://codeply.com/go/XaBsD5AhJG
<div class="container">
<div class="row no-gutters">
<label class="col-2 col-form-label">Email</label>
<div class="col-8">
<input type="text" class="form-control">
</div>
<div class="col-2 pl-1">
text
</div>
</div>
</div>
Bootstrap 4 also has padding utility classes classes that can be used to adjust padding on individual elements. For example, I used pl-1(padding-left) on the last column to give a little space between the input and "text". Another Bootstrap 4 option is to use flex-nowrap on the row which will prevent wrapping and creating horizontal scrolling when there is overflow.
In Bootstrap 3, you need to add CSS to adjust the padding.
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.no-gutters>[class*=col-] {
padding-right: 0;
padding-left: 0;
}
Related
Bootstrap col-xs wrapping
Bootstrap xs columns wrap
You have wronged close the <div> tag
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<label class="col-2 col-form-label">Email</label>
<div class="col-8">
<input type="text" class="form-control">
</div>
<div class="col-2">
text
</div>
</div>
</div>
I have this very simple code using Bootstrap 3:
<html>
<body>
<main class="container" role="main">
<form class="simple_form form-horizontal">
<div class="form-group text required campaign_url">
<label class="text required control-label" for="campaign_url"><abbr title="required">*</abbr> Url</label>
<textarea class="text required form-control" name="campaign[url]" id="campaign_url"></textarea>
</div>
and it appears like this:
Notice how tho labels and the inputs are sticking to the left. Inspecting those elements I found this:
.form-horizontal .form-group {
margin-left: -15px;
margin-right: -15px;
}
Why is that there? I know it's trivial to remove, but it makes me wonder whether the way I'm using Bootstrap is wrong. How should I use it?
It's happening because you are using form-horizontal which is meant to be used as a row along with col-*'s for layout. From the Bootstrap docs:
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.
So if you simply remove the form-horizontal the negative margin goes away.
http://codeply.com/go/QQnqgfKv9v
I just spend some time getting to understand this negative margin as well.
Turns out that normally you embed a form-horizontal into a container or container-fluid that puts a margin of 15px and the form-groups use -15px.
The real problem is that you are missing some <div class="col-..."> to wrap your label and form controls.
These add some padding left+right and that will display it correctly.
Something like:
<html>
<body>
<main class="container" role="main">
<form class="simple_form form-horizontal">
<div class="form-group text required campaign_url">
<div class="col-md-12">
<label class="text required control-label" for="campaign_url"><abbr title="required">*</abbr> Url</label>
</div>
<div class="col-md-12">
<textarea class="text required form-control col-md-12" name="campaign[url]" id="campaign_url"></textarea>
</div>
</div>
I am using the grid system of bootstrap.
My HTML looks as follows (jade syntax)
form.form-horizontal(role='form', name='containerForm', id='containerForm', novalidate)
fieldset
.form-group
label.col-lg-2.control-label(for='ContType')
.col-lg-4
select.form-control(ng-model="data.ContainerType", id='ContType', name='ContType', ng-options='translate(s.name) for s in containerTypeList')
.form-group
(and so on)
The 'form-control' CSS class is taking 100% width of parent DIV (e.g. col-lg-4, these col-lg classes are effectively "table cells"):
.form-control {
display: block;
width: 100%;
}
I need however to display some HTML right before the SELECT above (or, alternatively, after). I need that HTML to be in the same line as the SELECT. If I simply enter something after the SELECT now, it goes to next line, due to width=100% of that SELECT.
How I can possibly achieve my goal while keeping bootstrap classes in place?
You could place both in a row, then put each item in it's own column. For example:
<div class="row col-sm-12">
<div class="col-sm-6">
<input type="text" class="form-control">
</div>
<div class="col-sm-6">
<button class="btn btn-primary">Demo</button>
</div>
Alternatively, you could use an input-group, for example:
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">Demo</button>
</span>
</div>
<body>
<div class="container">
<div class="row">
<div class="offset4 span4">
<h1 class="text-center">Days</h1>
<form method="post" action="proc/days.php" id="jobs">
<div class="input-prepend">
<span class="add-on">Job Count</span>
<input type="text" class="day1">
</div>
<div class="input-prepend">
<span class="add-on">Day Name</span>
<input type="text" class="day2">
</div>
</form>
</div>
</div>
</div>
</body>
is my primary block of code (with all the other stuff striped out). I want to get the input-prepend to take up all the width available in the span4.
Right now, the only tricks I can find end up not working, or being way to large.
Also, I am using the Cosmo Bootswatch theme.
Setting .day1 to 76% width (after padding and borders are considered etc) will fill up your space. Problem would then be that you have another element depending on the .day1 class. So add an id, or example like:
<input type="text" class="day1" id="day1">
and then use #day1 {width:76%;} in your css. You'd most likely need to adjust the width size as your screen width changes though (through media queries).