I have a btn-group which I'd like to separate while maintaining the same group. Currently, although initially the group displays as expected, once I select the button from the other side ('Exclude'), I can't deselect it - the two halves seem to be behaving as two groups.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/3/cerulean/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9 btn-toolbar" role="toolbar">
<div class="btn-group" data-toggle="buttons" role="group">
<label class="btn btn-warning">
<input type="radio" class="reason" name="reason" id="off" value="None" autocomplete="off"> Exclude
</label>
</div>
<div class="btn-group" data-toggle="buttons" role="group">
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="war" value="War" autocomplete="off"> War
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="peace" value="Peace" autocomplete="off"> Peace
</label>
<label class="btn btn-default active">
<input type="radio" class="reason" name="reason" id="both" value="Both" autocomplete="off" checked> Both
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="total" value="Total" autocomplete="off"> Total
</label>
</div>
</div>
JSFiddle
I don't think you can separate the divs like that. I think the easiest solution is just to add a bit of margin on the "special" button:
<link href="https://bootswatch.com/3/cerulean/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div class="col-md-9 btn-toolbar" role="toolbar">
<div class="btn-group" data-toggle="buttons" role="group">
<label class="btn btn-warning" style="margin-right: 10pt;">
<input type="radio" class="reason" name="reason" id="off" value="None" autocomplete="off">
Exclude
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="used" value="War" autocomplete="off">
War
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="off" value="Peace" autocomplete="off">
Peace
</label>
<label class="btn btn-default active">
<input type="radio" class="reason" name="reason" id="both" value="Both" autocomplete="off" checked>
Both
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="total" value="Total" autocomplete="off" >
Total
</label>
</div>
</div>
The issue here is that bootstrap applies the styling to the buttons based on the active class, which is applied to the label via Javascript. So the radio buttons are actually selected and unselected correctly, it's just hidden by the styling.
Here's two ways of working around this:
Using HTML & CSS:
Combine the buttons into a single button-group with an id of custom-group and add the following css.
#custom-group label:first-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
margin-right: 10px;
}
#custom-group label:nth-of-type(2) {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
Similar to the answer by kabanus, this will make the single button group look like two.
Using Javascript
Leave the HTML as is and add the following javascript:
var labels = document.querySelectorAll('label');
labels.forEach(function(label) {
label.addEventListener('click',function() {
labels.forEach(function(l) {
l.classList.remove('active');
});
label.classList.add('active');
});
})
This will 'manually' remove the active class from all the buttons and just add it to the one you just clicked. Make sure to tweak the selector for the labels so it doesn't affect other code on your page.
Here's a fiddle: https://jsfiddle.net/22et5z3h/4/
Related
Using this starter template how can I control the with of the input width?
https://getbootstrap.com/docs/4.1/examples/starter-template/
This is the portion I would like to make smaller
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
I have tried to wrap the input in a div <div class="col-xs-2"> but that did not do anything. What alternatives do I have?
the simplest way to manage width of input field is just add the w-25 class to input field.
<input class="form-control w-25" type="text" placeholder="Search" aria-label="Search">
you can set width as you require
w-25
w-50
w-75
&
w-100 or w-auto
w defines the width.
Solution 1: Specify "max-width" for your input element:
input[type=text] {
max-width: 200px;
}
input[type=button] {
max-width: 100px;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
<input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
</div>
Solution 2: Or try adding col-* classes in the select and input.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<form class="row">
<div class="col-10">
<input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
</div>
<div class="col-2">
<input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
</div>
</form>
you can do this in css file by doing:
CSS code to put in css file or to put inside a style tag
input{
width:50px;
}
I'm trying to use the toggle feature in Bootstrap, but would like to replace the default buttons with an image. The image has text that reads "This week". The button right next to it will be an image that reads "All Time". Any ideas on how to do this?
You can see the webpage laid out here:
http://matthewtbrown.com/test/imageasbutton/
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active thisweek">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
</div>
rightcolumn .btn-group .btn .btn-primary .active .thisweek {
background-image: url(../images/callout.png);
background-color: transparent;
}
you means you want images as a radio buttons yes?
hope, this helps:
<style>
/*input[type=radio] {
display: none;
}*/
</style>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active thisweek">
<input type="radio" name="options" id="option1" autocomplete="off" checked><img src="https://placehold.it/200x200">
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"><img src="https://placehold.it/150x150">
</label>
Uncomment style to hide radio buttons graphics :)
i have a problem when my view render, i am using a input group class to join a textbox and a input but the problem is that if you see they doesn't get together, i already find a solution that is to erase part of the 'site.css' mvc project make from default but that doesn't work for me.
here is my code.
#using (Html.BeginForm())
{
<div class="input-group">
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
Product name: #Html.TextBox("id", null, new {#class = "form-control"})
</div>
}
and its views like this
Try changing the width of the div.
UPDATE:
I am confused on why your TextBox and Label(Product Name) are below the span.
Here is a working example with add-ons on both sides:
<div class="form-group">
<label class="control-label">Input addons</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Button</button>
</span>
</div>
</div>
Your problem is that "Product name:" falls inside the input-group but isn't in a input group compatible tag. Here is a plunker with some options. enter link description here
<form action="/Products/Index" method="post">
<div class="input-group">
<span class="input-group-addon"> Product name:</span>
<input class="form-control" id="id" name="id" type="text" value="" />
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
</div>
</form>
<form action="/Products/Index" method="post">
<label>Product name:</label>
<div class="input-group">
<input class="form-control" id="id" name="id" type="text" value="" />
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
</div>
</form>
I have the following bootstrap code for showing a textfield with a button:
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<label>Second Column</label>
<input type="text" class="form-control" placeholder="Search for...">
</div>
<!-- /input-group -->
</div>
I should get something like this:
But what I get is this:
I guess its because of the <label> tag.
Any clue on how can I fix this?
I think you need to move the label to outside the .input-group
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label for="field1">Second Column</label>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input id="field1" type="text" class="form-control" placeholder="Search for...">
</div>
</div>
I'm using Bootstrap 3 and I want to make two buttons work as Radio Buttons, but I can't figure out how. Here goes my code
<div class="btn-group" >
<div class="btn-group">
<button type="button" class="btn btn-default">
PERSONAL
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
COMPANY
</button>
</div>
</div>
When I select PERSONAL, the other one is deselected (as it should), but the problem is:
None of them are active when the form is started
I can deselect both clicking out of the form
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<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>
And initialize with js after:
Enable buttons via JavaScript:
$('.btn').button()
You can make one of it active adding "active" class to label - "btn btn-primary active" and "checked" to input radio.
I think that there is a better solution nowadays, according to the Bootstrap docs:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>