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
Related
I know this kind of question has been asked before, but the solutions listed there did not work for me.
I have two divs, one with text and the other one has multiple divs, in a nested structure. I want them placed beside each other. I tried display: inline-block as most solutions pointed out, but they did not work for me.
Here's my code:
<div class="close-date-div">Close Date:
<div class="form-group" id="close_date">
<div class="input-group date">
<span class="input-group-addon" ><i class="fa fa-calendar"></i></span>
<input class="form-control" id="close_date_input" value="" type="text">
</div>
</div>
</div>
This is the output I am getting for that code snippet, how can make it so that Close Date and the input box are on the same line?
Make your text some king of html element. In this case a made it a paragraph element with the <p> tag
Hope this helps!
.inline {
display: inline-block;
}
<div class="close-date-div">
<p class="inline">Close Date:</p>
<div class="form-group inline" id="close_date">
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input class="form-control" id="close_date_input" value="" type="text">
</div>
</div>
</div>
Bootstrap 3 is very opinionated when it comes to forms. If you use the provided classes you have a limited set of possible presentations.
You could set your form to use form-inline or maybe form-horizontal
Here I had to use xs because the snippet window is too small to trigger any other break point. You will also have to tweek column widths and vertical alignment.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-horizontal">
<div class="close-date-div">
<div class="form-group" id="close_date">
<label class="col-xs-2 control-label">Close Date:</label>
<div class="col-xs-10">
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input class="form-control" id="close_date_input" value="" type="text">
</div>
</div>
</div>
</div>
</form>
I would comment but my rep isn't high enough yet.
I dealt with this recently, and I had to make sure that the positions were all set in order for the display: inline-block to work. I believe the following example should get you where you need to be.
.close-date-div{
position: relative;
}
.form-group{
position: relative;
display: inline-block;
}
.input-group date{
position:sticky;
display: inline-block;
}
Change
<div class="close-date-div">
To
<div class="close-date-div form-inline">
You may also want to add form-group. Note, this solution is specific to boostrap-only because you've shared code which is utilizing well-known bootstrap classes.
I have the a textbox used as a search field as follows that I want to align to the right:
<div class="col-md-6 search-form" style="padding:13px 0;">
<form action="/search" method="post">
<input type="search" name="q" style="max-width: 300px;" class="form-control" placeholder="Search here...">
</form>
</div>
I tried surrounding it with another div to attempt to do so using text-align as shown below but it didn't align exactly where I want it
.new-search-div {
display: inline-block;
text-align: right;
}
Here's a screenshot of where I am trying to align it...
text-align:right; will only right align text elements.
It appears that your are using bootstrap. You could try giving your form a class of pull-right, which is a bootstrap class for float right.
<form action="/search" method="post" class="pull-right">
<input type="search" name="q" style="max-width: 300px;" class="form-control" placeholder="Search here...">
</form>
Don't use align:right;, there's no such CSS rule, use float:right; instead.
(The element will be aligned to the right of the parent element, so you might need to apply that on the parent form instead, if you don't see it changing.)
Already tried to give the Input a float: right; ?
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
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.
I'm using the css form styles from Twitter Bootstrap but I would like to decrease the default spacing between the form input fields. Not sure which css element I need to overwrite.
Any ideas?
When using Bootstrap v2.1 I use their horizontal forms to reduce the height of my forms, I then find altering the .control-group bottom margin can give the desired effect.
Default is 20px I beleive, I use 8px
.form-horizontal .control-group {
margin-bottom: 8px;
}
If you're working with the default setup you can decrease the .line margin to achieve your goal. Try this:
form .line {
margin-bottom: 5px; //adjust to your liking
}
This is of course if you're working with an input field separated by the line div that the bootstrap uses, e.g.:
<div class="line">
<label for="input">Full Name</label>
<div class="input">
<input type="text" name="input" size="30">
</div>
</div>
<div class="line">
<label for="input">Last Name</label>
<div class="input">
<input type="text" name="input" size="30">
</div>
</div>
...
Demo http://jsfiddle.net/andresilich/qxMVd/1/