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.
Related
I'm having trouble getting a glyphicon-search button to line up in bootstrap.
This is not a unique problem, I found this question that asks a similar thing, except the accepted and celebrated answer isn't working for me. Just like the answer, I have a div input group wrapper that should line up the field, but it isn't working, as you can see in my jsfiddle:
http://jsfiddle.net/pk84s94t/
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default glyphicon glyphicon-search input-sm" type="submit"></button>
</span>
<input type="text" class="form-control input-sm">
</div>
http://jsfiddle.net/kv8n7n5g/
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
<input type="text" class="form-control" placeholder="Search">
</div>
You had the glyphicon classes inside the button tag.
If that doesn't work you may have to change the line-height of the icon to 1. I was using ionicons and the 1.4... line-height was throwing everything off.
That's interesting. I've never tried using a button with an input group like that, and I'm not sure why that behavior is occuring. Seems to be an easy fix though.
I added top:0 to the existing rule .input-group-btn>.btn which already had position: relative; ...
http://jsfiddle.net/pk84s94t/1/
EDIT
While this does fix the behavior, Rachel S's answer is a better solution as it's not changing CSS rules, but using proper HTML within bootstrap to fix the problem.
The problem you are having is due to the glyphicon button default size in bootstrap. But if you put some text in the button it aligns perfectly as now the button for the text is given more priority than the glyphicon's default. For the text I used  . It works fine now.
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> 
</button>
</span>
</div>
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 :)
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>
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.
The following code example code should result in something like .
<form class="well form-search">
<div class="pull-right">
<div class="input-prepend">
<span class="add-on">
<i class="icon-search"></i>
</span>
<input type="text" class="input-large search-query" />
</div>
<button class="btn" type="submit">Search</button>
</div>
</form>
This works perfectly well in Firefox, but in both Chrome and Internet Explorer 7 browsers, it looks like the following:
Am I doing something "illegal" with bootstrap? I did not make any adaptions yet so it's completely out-of-the-box.
Any help is greatly appreciated!
This was a reported issue: https://github.com/twitter/bootstrap/issues/1362
The fix outlined by tonybolzan in the issue works best because you don't have explicitly set a width:
.input-prepend, .input-append {
white-space: nowrap;
-webkit-padding-end: 27px;
}
The problem is with the whitespace found in your markup, try to place the span tag on the same line as the input, like so:
<form class="well form-search">
<div class="pull-right">
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-search"></i></span><input type="text" class="input-large search-query" />
</div>
<button class="btn" type="submit">Search</button>
</div>
</div>
</form>
This is old, but it helped me determine the answer I was looking for:
The problem is probably that bootstrap is setting the width of the input to 210px, which is causing the whole icon/input/button grouping to be wider than your well.
I've updated the fiddle Andres posted above with a sample of the problem by forcing the well forms to a smaller width than their default and a fix by using an input class with a smaller width.
http://jsfiddle.net/dDtUg/2/