I have a horizontal form in Angular using Bootstrap. I have one date field that is just slightly misaligned. The input field of the IsMessedUp datepicker is aligned to the left compared to the input fields above it. I'd also ideally like it to be the same width of the "Sixth Thing" Calendar element.
The calendar element code is here:
<div class="form-group row">
<label class="col-md-2 col-md-offset-7 control-label">IsMessedUp Date: </label>
<p class="input-group col-md-3">
<input type="text" class="form-control input-sm" uib-datepicker-popup="{{format}}"
ng-model="ismessedupdt"
is-open="ismessedupdt.opened" min-date="minDate" max-date="maxDate"
datepicker-options="dateOptions"
ng-required="true" close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default input-sm" ng-click="open3()"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
Here is the Fiddle: http://jsfiddle.net/k0c0e68n/
You should be removing the padding-left and padding-right for input-group [class*="col-"] for the p tag which is adding the extra space to the mentioned input element(isMessedUpDate)
Workaround: Remove the input-group class with custom class inputGroup or something and specify the class something like this:
.inputGroup {
position: relative;
display: table;
border-collapse: separate;
}
Updated fiddle: http://jsfiddle.net/Raghu9972/k0c0e68n/1/
This may not be a right approach, change it accordingly :)
Related
Fiddle
<div class="row">
<div class="col-xs-6 input-group input-group-lg" style="padding-left:15px;">
<span class="input-group-addon add-on"><i class="fa fa-calendar"></i></span>
<input class="form-control" id="daterange" type="text" placeholder="Run Range"
maxlength="128" readonly="readonly" style="background-color:White;cursor:pointer;" />
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-primary btn-lg has-spinner" id="btn-search">Go!</button>
</div>
</div><br>
I have literally dozens of other instances of rows and columns in my site but this row refuses to behave. Why?
input-group class in Bootstrap is displayed as a block element, so it will push anything after it to a new line. If you want the button to be next to the input field, you need to add a class for example input-group-inline and override the default style from Boostrap.
.input-group-inline {
display: inline-block;
}
Your fiddle is missing a reference to bootstrap.css, i added it and it all works fine https://jsfiddle.net/ujbh3z4p/ try checking the references in your html
Remove padding from a row. This can cause to rows to be different widths.
Bootply codes can be seen here => http://www.bootply.com/QpvisrtAJR
I want the input box to be longer, however, the width:100% doesn't work for it.. And I don't want to use width: xxxpx or size=xxx to make it longer because it will be un-responsive in different resolution..
Does anyone have ideas about this?
Your input rule isn't actually being applied. It is not specific enough so is being overwritten by a default bootstrap rule. Try this instead:
.form-inline button.form-control,
#contain_word
{
display: block;
width: 100%;
}
http://www.bootply.com/Qh2VwydnHx
Also you have a an erroneous character in your html where you give the input field an id. Should be:
<input type="email" class="form-control" id="contain_word">
Not:
<input type="email" class="form-control" id="contain_word`">
You can use the calc() method to have the input field 100% in width but still float left to the label.
Updated Bootply: http://www.bootply.com/2K3ZIWsuWy
Calc() is compatible with most browsers except Opera Mini. For Blackberry you still need -webkit.
Check out the compatibility table here: http://caniuse.com/calc
You can add your class with a specified width
or override existing styles, but it is better to create your own style file
http://www.bootply.com/QpvisrtAJR#
div class="row">
<form class="form-inline" role="form">
<div class="form-group col-sm-6 no-padding">
<label for="contain_word`">Containing word(s): </label>
<input class="form-control test" id="contain_word`" type="email">
</div>
<div class="col-sm-2">
<button class="btn btn-primary form-control">Search</button>
</div>
<div class="col-sm-2">
<button class="btn btn-primary form-control">Clear</button>
</div>
</form>
</div>
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.
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;
}