I use input-group in modal dialog. And the button is 1px less then other elements. How can I fix it, more then less why I have this bug? I use Bootstrap 3
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="buttons input-group col-sm-offset-1 col-sm-9">
<input type="number" min="1" value="1" class="form-control" />
<span class="input-group-addon">ks</span>
<span class="input-group-btn">
<button type="button" class="btn btn-default glyphicon glyphicon-remove color-red"/>
</span>
</div>
For me, the bug was because of a rounding error.
there's this style rule
.btn {
line-height: 1.42857;
}
which should be
.btn {
line-height: 1.42857143;
}
Turns out importing bootstrap within other SASS files resulted in a loss of precision. The SASS compile process needed the flag --precision 8 to work correctly.
For you, though, as noted in another answer, you just need to put your icon in another tag.
<span class="input-group-btn">
<button type="button" class="btn btn-default color-red">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
I encountered this today, and with a bit of googling and experimentation, it seems the correct way to use a glyphicon is to always use the icon class on it's own span, and not to combine it with other classes / components.
If your example; you would do the following:
<span class="input-group-btn">
<button type="button" class="btn btn-default color-red">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
With this there is no need to to any style changes.
It's caused by using a glyphicon on the button, and seems to be a bug with bootstrap. Use
.input-group-btn>.glyphicon {margin-top: -1px;}
to fix it.
http://fiddle.jshell.net/85m5mwsg/2/
Remove top of .glyphicon
http://jsbin.com/dufisukefe/3/edit
.input-group-btn .glyphicon
{
top :0px
}
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'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'm trying to add an <input type="reset"> with a Font Awesome icon.
I can achieve this with a hyperlink or button but if I go down that route I need to use jQuery/JS to clear the form, which I'm trying to avoid for the time being.
I'm curious to whether it's possible to achieve the same results. Please see the JSFiddle to see what I mean.
Input Reset:
<input type="reset" class="btn btn-warning" value=""><i class="fa fa-times"></i> Clear</input>
<br/>
<br/>
Button:
<button class="btn btn-warning"><i class="fa fa-times"></i> Clear</button>
<br/>
<br/>
Anchor:
<i class="fa fa-times"></i> Clear
If there's no other way I will implement a jQuery solution.
<input> is self-closing tag, it's not allowed to have any other elements inside it.
Here are all the 3 possible options of doing it as inline icon.
JsFiddle demo
1. wrap the <i> and <input> button into a <span> tag, with some custom styles.
<span class="btn btn-warning">
<i class="fa fa-times"></i> <input type="reset" value="Clear"/>
</span>
span > i {
color: white;
}
span > input {
background: none;
color: white;
padding: 0;
border: 0;
}
2. use <button type="reset"> - recommended.
<button class="btn btn-warning" type="reset">
<i class="fa fa-times"></i> Clear
</button>
3. use <a> anchor tag + javascript
<a href="javascript:document.getElementById('myform').reset();" class="btn btn-warning">
<i class="fa fa-times"></i> Clear
</a>
https://jsfiddle.net/a6s58Luj/3/
<input type="reset" class="NEWCLASS btn btn-warning" value=" Clear" />
By adding value=" Clear" you can add the X icon. f00d is the icon HEX/whatever, which I got from inspecting the elements (checking the ::before's content). You might have to look into some additional styling, but it will work. Just remember to set the font.
If you need this inside a form , You cant make type="reset"
The best methoad i would say is, wrap the input element with label and apply all css to label. so any click on label will trigger input element also.
<label classname="all css of your button">
<input type="submit" value="submit">
<i class="fa fa-times"></i>
</label>
I'm trying to position a clear button inside an input field, at the right before to the search icon, however it's not working; the "x" is displayed in front of the input field instead.
i use absolute positioning with right:0 and top:4px
You can see my example here: http://www.bootply.com/YUwdJ5Kvx6
A little update to get what you want:
input {
/* Avoid use typing under the clear button. */
padding-right: 30px !important;
}
.input-group-btn {
position: relative;
/* This avoid the "clear" button being hidden while
the input has focus on. */
z-index: 1000;
}
.input-group-btn a.btn {
position: absolute;
right: 38px;
top: 0px;
}
/* This avoid the bad effect when clicking the button. */
.input-group-btn a.btn:hover,
.input-group-btn a.btn:active {
box-shadow: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width: 300px;">
<div class="input-group">
<input class="form-control" placeholder="Search by ID..." type="text">
<span class="input-group-btn">
<a class="btn" style="color: rgb(204, 204, 204); text-decoration: none; " href="#clear">
<i class="glyphicon glyphicon-remove"></i>
</a>
<button type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
I added position: relative to input-group-btn for position: absolute to work on the close button. Then just a negative right: 36px to move the button in the input field.
I put the close button inside the input-group-btn because it was easier for me, and it automatically takes care of the vertical alignment of your button (I just added the btn class to the a tag).
I added padding-left: 30px !important to the input field to avoid user typing under the x button. To have a symmetrical space, you would need 38px, but it looks a bit much... You can change this value at your discretion to get the result you want.
Since the a tag is inside the input-btn-group with the btn class, you need something like a:hover { box-shadow: none ; } to avoid ugly box-shadow in your input when clicking on the close button.
Try this i have appended the button before and after. Comment if this is you want or not. Did i understood you correct?
<form action="#" method="get" class="sidebar-form" id="id_search" style="width:300px;margin-left:100px;margin-top:100px;">
<div class="input-group double-input">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
<input type="text" placeholder="Second" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div><!-- /input-group -->
</form>
I would like to put a (2 button) radio btn-group inside of an input-group-addon. The trouble I'm having there is that the buttons do not stay on one line.
The common patterns to keep elements on the same line did not work for me.
Do you know how I could fix this? Thx
Here's the jsfiddle: http://jsfiddle.net/DTcHh/144/
<div id="filter_criteria_date">
<div class="input-group" style='margin-top:15px'> <span class="input-group-addon">
<input type="checkbox">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-xs btn-primary">And</button>
<button type="button" class="btn btn-xs btn-primary">Or</button>
</div>
</span>
<input type="text" class="form-control filter_text" placeholder="Filter">
</div>
They do not stay on one line due to no width being set. Set a width for the parent of the buttons and they will fit.
.btn-group {
width: 100px;
}
DEMO HERE
.input-group-addon { width:auto; }
Working Demo http://jsfiddle.net/DTcHh/148/