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>
Related
I was trying to add all possible ways but without luck, this code is bit to hard for me, could any body help me.
How to add glyphicon glyphicon-search to <input style="width:10px" type="submit" class="btn btn-nomest" onclick="$('input:not(:submit,:button), select',this.form).val('');"
If I make another span its not working
Use <button> instead of <input type="submit">
<button
style="width:10px"
type="submit"
class="btn btn-nomest"
onclick="$('input:not(:submit,:button), select',this.form).val('');">
<i class="glyphicon glyphicon-search"></i>
</button>
I have the form below, in which I have a search glyphicon inside the input.
<form method="get">
<div class="input-group">
<input type="text" class="form-control" id="city" name="city"/>
<span class="input-group-addon btn"><span class="glyphicon glyphicon-search"></span></span>
</div>
</form>
I'd like to make my glyphicon submit my form, but for that I'd have to change the span for a input or button. In either way, the glyphicon goes outside the input and displays below it. I couldn't figure out why yet. I was able to put it in the correct position through absolute positioning, but it is not good for the way it is displayed in the website. Is there any way to solve this problem only with css and without absolute positioning?
The problem is bootstrap style buttons and inputs differently. You can use <span> and submit form with onclick event.
See this code:
<form id="myForm" method="get">
<div class="input-group">
<input type="text" class="form-control" id="city" name="city"/>
<span class="input-group-addon btn" onclick="document.getElementById('myForm').submit();" ><span class="glyphicon glyphicon-search"></span></span>
</div>
</form>
Working JSFiddle:
http://jsfiddle.net/q76dasdk/
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.
Sort of a weird problem. I'm following this section exactly but having a little trouble. When the button is aligned to the left of the field they align perfectly but when the button is aligned to the right (which I think of as more natural for a "submit" type behavior) there is about 5-10px of padding on top of the button that I can't get rid of:
My code is below:
<div class="col-sm-7">
<h3>Get the latest Amazon News first:</h3>
<div class="input-group">
<input type="text" class="form-control" placeholder="E-mail" />
<span class="input-group-btn">
<button class="btn btn-default btn-group" type="submit">Sign Up</button>
</span>
</div><!-- /input-group -->
</div><!-- /col-7 -->
<div class="col-sm-5">
<h3>Get Started Now:</h3>
<a class="btn btn-large btn-primary" href="#"><i class="icon-caret-right icon-space-right"></i>Start a Free Trial!</a>
</div>
I'm pretty confused why it would work on one side and not the other. Any help would be appreciated!
Something seems to be wrong if you have written any of your custom css. I just copied your html and created a pen using bootstrap cdn css hosted files. Check this pen/demo.
It's because somehow you are adding break tag i.e. above and below of your button element. just remove those breaks.
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/