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/
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>
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.
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
}
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
}
Using Bootstrap I want a button group but with one button preselected. If I use the html below then the first button gets preselected, but it remains active even when I click on one of the other buttons.
Using only html how can I define the button group with one button selected where that button will deselect when I click on one of the other buttons.
<div class="btn-group">
<button type="button" class="btn btn-default active">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
It's not completely possible to do this with HTML only - (as your title implies).
Really, the only thing you could do without JavaScript is add the attribute autofocus="autofocus" to the desired element like this:
<button type="button" class="btn btn-default" autofocus="autofocus">Left</button>
As the attribute implies, the button will automatically be focused in supported browsers. If another button is clicked, the focus of the first button will be removed.
EXAMPLE HERE
It's worth noting that the styling of .btn-default.active is the same as .btn-default:focus:
.btn-default:focus, .btn-default.active {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
Unfortunately, the focus will also be removed when clicking anywhere else on the page too. If this is a problem, JavaScript would be needed to solve this. The solution would be to have the active class on the desired element and then remove it when clicking on any of the sibling button elements. The selection would be mutually exclusive like with radio elements.
Here is an example taken directly from the Bootstrap JS documentation. It's worth noting that the Bootstrap JS file/jQuery need to be included.
EXAMPLE HERE
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>