I created this html:
There are two input-fields in a col-sm-12:
And in the next column i have a submit button:
<div class="row">
<div class="col-sm-12">
<input id="bis" class="form-control input-sm a" type="text" value="18-12-2013" placeholder="Bis" name="bis">
</input>
<input id="von" class="form-control input-sm a" type="text" value="02-12-2013" placeholder="Von" name="von">
</input>
</div>
<div class="col-sm-12">
<input class="btn btn-info btn-sm" type="submit" value="Filtern" style="float:right" name="commit">
</input>
</div>
</div>
And added this extra css to the text-fields:
.a {width:100px; float:right}
Because i tried to have the input fields next to each other and the submit button in the next colum right below it.
My problem now is that the submit button now is besides the two input fields! Although i wanted it below!Why? Thanks
Fiddle: http://jsfiddle.net/52VtD/807/
That's because you aren't clear after the floated elements.
You have two solutions :
One add this to your CSS:
.col-sm-12 {
clear:both;
}
Here in this article is all what you need to know about the use of float.
Two use display:inline-block instead of float:
.a {
display:inline-block;
}
The demo http://jsfiddle.net/52VtD/814/
Use CSS clear property for this. Refer CCS-CLEAR>> for more info.
Here you can try this:
.col-sm-12 {
clear:both;
}
Related
I have some difficulties positioning two elements on the right side of the page. Strangely the suggested answers of similar questions did not work at all or gave poor results, but most of them were correct if I used simpler elements like text-fields for example.
The view is:
Here's what I have:
input, select, textarea {
max-width: 280px;
text-size-adjust: auto;
}
<div class="input-group">
<span class="input-group-addon">Filter</span>
<input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
</div>
I have tried to adjust the position with float: right and by using the bootstrap grid system.
I assume you have somehow set your input-group to have a fixed width, instead of the default 100%. Otherwise it doesn't make sense to talk about positioning.
In any event, bootstrap has a pull-right class you can use in order to float elements to the right. Just add it to your first div.
.input-group {
width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group pull-right">
<span class="input-group-addon">Filter</span>
<input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
</div>
Have a read about this on the official docs, here
try this one:
<div class="input-group">
<span class="input-group-addon">Filter</span>
<input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
</div>
DEMO
or
.input-group-addon {
min-width:100px;
text-align:left;
}
DEMO HERE
group to align a label and an input box. The idea is to put the label and the input box in different lines. The code snippets are like:
<form>
<div class="form-group">
<label for="input">Please enter names, separated by space:</label>
<div>
<div class="col-xs-8">
<input type="text" class="form-control" id="input" placeholder="Enter up to 10 names to search" ng-model="vm.searchRaw">
</div>
<div class="block-align-right">
<button class="btn btn-primary" style="width: 120px" ng-click="vm.search()" ng-disabled="vm.notEntered()">Search</button>
</div>
</div>
</div>
</form>
The divs inside the form group is mainly to align the input box and the button to one line. Now the problem is: the left edge of the label and the left edge of the input box don't align; the input box shifts to the right a bit. Without using padding how can I fix this? Or is it built in for the form-group? Thanks!
Use this type
Working JS Fiddle
HTML:
<div>
<label>Name:</label><input type="text">
<label>Email Address:</label><input type = "text">
<label>Description of the input value:</label><input type="text">
</div>
CSS:
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
Add class to label. like:
<label class="col-xs-10" for="input">Please enter names, separated by space:</label>
Will solve your issue.
Because bootstrap class will add padding-left:15px.
Check image below.
Working Fiddle
Seems like you are using bootstrap. Just modify the <label> line as follows:
<label for="input" class="col-xs-12">Please enter names, separated by space:</label>
I have the following HTML:
<form class="form-inline" role="form">
<div class="form-group">
<input class="form-control" type="text" placeholder="Your comments" />
</div>
<div class="form-group">
<button class="btn btn-default">Add</button>
</div>
</form>
The issue I am facing is that these two elements aren't taking the entire line (they aren't touching). See here:
Why is this the case?
Here is a fiddle show casing the problem: https://jsfiddle.net/nirchernia/pyfetd4p/
A couple of things:
form-group is display:block.
put both the input and button tag inside the same form-group
The form-control is a display:block as well. Use CSS to force it to display:inline-block and shorten the width (it was 100%).
jsfiddle: https://jsfiddle.net/b6x12fc8/
<div class="form-group">
<input class="form-control" type="text" placeholder="Your comments" />
<button class="btn btn-default">Add</button>
</div>
.form-inline .form-control { width:75%; display:inline-block;}
Give following css. Because currently it will taking width:auto; So, it will take default width of input field.
To make it touch with button. Give 100% and there is padding given so, it will increase more width and overlap the button. So, remove padding but padding:0
.form-inline .form-control {
padding: 0;
width: 100%;
}
https://jsfiddle.net/pyfetd4p/1/
To make side by side in small screen use following css;
.form-inline {
display: flex;
}
Fiddle link
How can I get a header and a form inline?
<h2 class="sub-header">Name</h2>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">Name</label>
<input type="input" class="form-control" id="name" placeholder="Name">
</div>
<button type="submit" class="btn btn-default" title="Save">
<span class="glyphicon glyphicon-ok"></span>
</button>
<form>
I want the form on the right side and the sub-header on the left side, so I tried to add pull-right to the form-class, but it still does not work, the form is always under my sub-header.
You need to give the form_inline a float right in CSS.
.form_inline {
float: right;
margin-top: -XXpx;
}
The margin-top is to setup the height of the form.
h2 , .form-inline , .form-group{
display:inline;
}
http://jsfiddle.net/JvfqB/
Something like this?
Edit:
Just cleared it up a little (but refer to the original jsfiddle):
http://jsfiddle.net/JvfqB/1/
Try using the css float
.Anyclass{
float:right;
}
Another method is the css display element
.AnyClass{
display:inline
}
I am struggling to create a textbox that fits the entire width of my container area.
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form">
<input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
<button type="submit" class="btn btn-lg">Search</button>
</form>
</div>
</div>
When I do the above, the two form elements are in-line, as I expect, but don't take up more than a few columns, at best. Hovering over the col-md-12 div in firebug shows it taking up the expected full width. It's just the text input that doesn't seem to fill. I even tried adding an in-line width value but it didn't change anything. I know this should be simple, just feeling really dumb now.
Here is a fiddle: http://jsfiddle.net/52VtD/4119/embedded/result/
EDIT:
The selected answer is thorough in every way and a wonderful help. It's what I ended up using. However I think my initial issue was actually a problem with the default MVC5 template within Visual Studio 2013. It contained this in Site.css:
input,
select,
textarea {
max-width: 280px;
}
Obviously that was blocking the text-input from expanding appropriately... Fair warning to future ASP.NET template users...
The bootstrap docs says about this:
Requires custom widths Inputs, selects, and textareas are 100% wide by
default in Bootstrap. To use the inline form, you'll have to set a
width on the form controls used within.
The default width of 100% as all form elements gets when they got the class form-control didn't apply if you use the form-inline class on your form.
You could take a look at the bootstrap.css (or .less, whatever you prefer) where you will find this part:
.form-inline {
// Kick in the inline
#media (min-width: #screen-sm-min) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
// In navbar-form, allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
// Input groups need that 100% width though
.input-group > .form-control {
width: 100%;
}
[...]
}
}
Maybe you should take a look at input-groups, since I guess they have exactly the markup you want to use (working fiddle here):
<div class="row">
<div class="col-lg-12">
<div class="input-group input-group-lg">
<input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
<span class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit">Search</button>
</span>
</div>
</div>
</div>
have a look at something like this:
<form role="form">
<div class="row">
<div class="col-xs-12">
<div class="input-group input-group-lg">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="submit" class="btn">Search</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-xs-12 -->
</div><!-- /.row -->
</form>
http://jsfiddle.net/n6c7v/1/
As stated in a similar question, try removing instances of the input-group class and see if that helps.
refering to bootstrap:
Individual form controls automatically receive some global styling.
All textual , , and elements with
.form-control are set to width: 100%; by default. Wrap labels and
controls in .form-group for optimum spacing.
Try something like below to achieve your desired result
input {
max-width: 100%;
}
You can use flex-fill class for input
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form">
<input type="text" class="form-control input-lg flex-fill" id="search-church" placeholder="Your location (City, State, ZIP)">
<button type="submit" class="btn btn-lg">Search</button>
</form>
</div>
With Bootstrap >4.1 it's just a case of using the flexbox utility classes. Just have a flexbox container inside your column, and then give all the elements within it the "flex-fill" class. As with inline forms you'll need to set the margins/padding on the elements yourself.
.prop-label {
margin: .25rem 0 !important;
}
.prop-field {
margin-left: 1rem;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12">
<div class="d-flex">
<label class="flex-fill prop-label">Label:</label>
<input type="text" class="flex-fill form-control prop-field">
</div>
</div>
</div>
I know that this question is pretty old, but I stumbled upon it recently, found a solution that I liked better, and figured I'd share it.
Now that Bootstrap 5 is available, there's a new approach that works similarly to using input-groups, but looks more like an ordinary form, without any CSS tweaks:
<div class="row g-3 align-items-center">
<div class="col-auto">
<label>Label:</label>
</div>
<div class="col">
<input class="form-control">
</div>
<div class="col-auto">
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
The col-auto class makes those columns fit themselves to their contents (the label and the button in this case), and anything with a col class should be evenly distributed to take up the remaining space.