I have two bootstrap toggle buttons, but when I click one of them, the other is getting affected. Can you please tell me what is wrong in my code ?
<div class="row p-0 m-0">
<!-- all day event toggle -->
<div class="col-md-3">
<label for="allDayEvent">All Day Event:</label><br>
<div class="btn-group btn-group-toggle" id="AllDayEventButton" data-toggle="buttons" disable="false">
<label class="btn btn-secondary" id="allDayEventYesLbl" >
<input type="radio" name="options" id="allDayEventYes" autocomplete="off">
Yes
</label>
<label class="btn btn-secondary active " id="allDayEventNoLbl" >
<input type="radio" name="options" id="allDayEventNo" autocomplete="off">
No
</label>
</div>
</div>
<!-- all day event toggle END -->
<!-- Recurring event toggle -->
<div class="col-md-3">
<label for="recurringEvent">Recurring Event:</label><br>
<div class="btn-group btn-group-toggle" id="RecurringButton" data-toggle="buttons">
<label class="btn btn-secondary" id="recurringEventYesLbl">
<input type="radio" name="options" value="Y" id="recurringYes" autocomplete="off">
Yes
</label>
<label class="btn btn-secondary active" id="recurringEventNoLbl">
<input type="radio" name="options" value="N" id="recurringNo" autocomplete="off" checked>
No
</label>
</div>
</div>
<!-- recurring event toggle END -->
</div>
There is very simple mistake you might have overlooked. Both the inputs in both radio buttons have the same name. Inputs in same radio button should have same name, but in different groups should have different names. Just changing the names in the second group will fix it. Here is a fixed version!
<div class="row p-0 m-0">
<!-- all day event toggle -->
<div class="col-md-3">
<label for="allDayEvent">All Day Event:</label><br>
<div class="btn-group btn-group-toggle" id="AllDayEventButton" data-toggle="buttons" disable="false">
<label class="btn btn-secondary" id="allDayEventYesLbl" >
<input type="radio" name="options" id="allDayEventYes" autocomplete="off">
Yes
</label>
<label class="btn btn-secondary active " id="allDayEventNoLbl" >
<input type="radio" name="options" id="allDayEventNo" autocomplete="off">
No
</label>
</div>
</div>
<!-- all day event toggle END -->
<!-- Recurring event toggle -->
<div class="col-md-3">
<label for="recurringEvent">Recurring Event:</label><br>
<div class="btn-group btn-group-toggle" id="RecurringButton" data-toggle="buttons">
<label class="btn btn-secondary" id="recurringEventYesLbl">
<input type="radio" name="optionsTwo" value="Y" id="recurringYes" autocomplete="off">
Yes
</label>
<label class="btn btn-secondary active" id="recurringEventNoLbl">
<input type="radio" name="optionsTwo" value="N" id="recurringNo" autocomplete="off" checked>
No
</label>
</div>
</div>
<!-- recurring event toggle END -->
</div>
Related
How can I align the Section and Date and Time to be below the Number of Guests? And how can I move the buttons to be below the Date and Time text fields?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div id="reserveTable" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Reserve a Table </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<legend class="col-form-label col-12 col-md-4">Number of Guests</legend>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests1" value="1">
<label class="form-check-label" for="guests1">1 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests2" value="2">
<label class="form-check-label" for="guests2">2 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests3" value="3">
<label class="form-check-label" for="guests3">3 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests4" value="4">
<label class="form-check-label" for="guests4">4 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests5" value="5">
<label class="form-check-label" for="guests5">5 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests6" value="6">
<label class="form-check-label" for="guests6">6 </label>
</div>
</div>
</div>
<div class="form-row">
<legend class="col-form-label col-12 col-md-4">Section</legend>
<div class="form-check form-check-inline">
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Non-Smoking</label>
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Smoking</label>
</div>
</div>
<div class="form-row">
<legend class="col-form-label col-12 col-md-4">Date and Time</legend>
<div class="form-check form-check-inline">
<div class="col-4 col-md-3">
<input class="form-control" type="datetext" placeholder="Date" id="reservationDate">
</div>
<div class="col-4 col-md-3">
<input class="form-control" type="timetext" value="Time" id="reservationTime">
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-1">Reserve</button>
</div>
</form>
</div>
</form>
</div>
</div>
</div>
</div>
Here is one way you could handle a bootstrap 4 form within a modal.
It sometimes works to convert the div.modal-content to a form.modal-content element so you can utilise bootstraps modal child .modal-header, .modal-body and .modal-footer framework div elements.
There is no html 5 validation markup rules against this method (I think)... the output result is much cooler than oppose to writing the form purely inside the .modal-body div.
As long as you can handle the validation OK this way then worth playing around with this.
I have included html comments on the key opening and closing points, see comments in working demo below...
Here is fiddle version too... https://jsfiddle.net/joshmoto/2svz7u5o/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reserveTable">
Launch reserve table modal
</button>
<div id="reserveTable" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<!-- convert modal-content div into form element -->
<form class="modal-content">
<!-- then our modal-header div -->
<div class="modal-header">
<h4 class="modal-title">Reserve a Table </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- then our modal-body div -->
<div class="modal-body">
<!-- then our number of guests form-group -->
<div class="form-group">
<label>Number of Guests</label>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests1" value="1">
<label class="form-check-label" for="guests1">1 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests2" value="2">
<label class="form-check-label" for="guests2">2 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests3" value="3">
<label class="form-check-label" for="guests3">3 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests4" value="4">
<label class="form-check-label" for="guests4">4 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests5" value="5">
<label class="form-check-label" for="guests5">5 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests6" value="6">
<label class="form-check-label" for="guests6">6 </label>
</div>
</div>
</div>
<!-- then our section form-group -->
<div class="form-group">
<label>Section</label>
<div class="btn-toolbar">
<div class="btn-group btn-group-toggle btn-block" data-toggle="buttons">
<label class="btn btn-outline-success w-50">
<input type="radio" name="tableSection"> Non-Smoking
</label>
<label class="btn btn-outline-danger w-50">
<input type="radio" name="tableSection"> Smoking
</label>
</div>
</div>
</div>
<!-- then our date and time form-group -->
<div class="form-group">
<!-- form-row div for tighter gutters with multi column form fields -->
<div class="form-row">
<!-- mobile first full width then 50% on sm col width -->
<div class="col-12 col-sm-6 mb-3 mb-sm-0">
<label for="reservationDate">Date</label>
<input class="form-control" type="date" value="" id="reservationDate">
</div>
<!-- mobile first full width then 50% on sm col width -->
<div class="col-12 col-sm-6">
<label for="reservationTime">Time</label>
<input class="form-control" type="time" value="" id="reservationTime">
</div>
</div>
</div>
<!-- closing modal-body div elem -->
</div>
<!-- then our modal-footer div containing the dismiss and submit buttons -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary ml-1">Reserve</button>
</div>
<!-- closing form element for our modal-content div -->
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js"></script>
In response to your last comment, IDE recommendations from me is a biased one because I have only used one in the last 8 years or more, and that is PhpStorm. It all depends on what language you are working with, I predominately use PHP so this is my IDE of choice.
I cant speak for Visual Studio or version of VS you use, tho surprising no flags (warnings, errors, etc) appear in your editor. You should not have to find an option for this, it should make you aware of any invalid html markup as you work..
..one would hope 🙏
I'm new to Angular 5 and I'm having radio button like component in my app as follows.
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="vehicles">
<label ngbButtonLabel class="btn btn-secondary active">
<input ngbButton type="radio" name="mode" [value]="true" > Toyota
</label>
<label ngbButtonLabel class="btn btn-secondary">
<input ngbButton type="radio" name="mode" [value]="false"> Nissan
</label>
</div>
I also have a separate div as follows. I want to show that div only a user selects Nissan button. I try to use ngif. But failed. Can someone please help me.
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Vehicle Type</label>
<ng-select
[items]="vehicleTypes"
bindLabel="name"
bindValue="id"
[(ngModel)]="selectedVehicleTypesId"
>
</ng-select>
</div>
</div>
Here is what you can try.
<label class="btn btn-secondary active">
<input type="radio" [(ngModel)]="show" name="bn" [value]="true"> Show
</label>
<label class="btn btn-secondary active">
<input type="radio" [(ngModel)]="show" name="bn" [value]='false'> ShowSecond </label>
<div *ngIf="show">
This will be togled for 1st Radio
</div>
<div *ngIf="!show">
This will be togled for 2nd Radio
</div>
Declare a property show in you component as boolean and initialize it to false.
show: boolean = false;
Here is a Demo of the same.
You can now change things according to your own code and structure.
Hope this helps
I am using bootstrap 3.3.6 and I am trying to disable this type of radio btn-group. I've tried placing the disabled on both the label and input, but it doesn't seem to work. The buttons would appear as disabled but still clickable. Whenever I click the buttons, an active class will be added.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="0" disabled="disabled">NO
</label>
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="1" disabled="disabled">YES
</label>
</div>
What am I doing wrong? Is it possible to disable the buttons?
For demo find below link of jsfiddle
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary disabled">
<input type="radio" autocomplete="off"> Radio 1 (pre-checked)
</label>
<label class="btn btn-primary active disabled">
<input type="radio" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary disabled">
<input type="radio" autocomplete="off"> Radio 3
</label>
</div>
Demo
The disabled attribute on the input will disable it, as in, you cannot change the value of the input while it's disabled. What you're seeing are the CSS stypes added by bootstrap that make it sorta look like something changed when you remove your mouse from the input.
You can prevent these styles with a little bit of jQuery:
$(".btn.disabled").mouseout(function(){
$(this).removeClass("active");
$(this).addClass("disabled");
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="0" disabled>NO
</label>
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="1" disabled>YES
</label>
</div>
My form currently contains this code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<label for="opt-0"><input type="radio" name="opt" id="opt-0" checked>Option 0</label>
<label for="opt-1"><input type="radio" name="opt" id="opt-1">Option 1</label>
<label for="opt-2"><input type="radio" name="opt" id="opt-2">Option 2</label>
Instead of showing the radio buttons as radio buttons, I'd like to make them look like regular buttons, like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">Option 0</button>
<button class="btn btn-default">Option 1</button>
<button class="btn btn-default">Option 2</button>
I have radios and I want to make them look like toggleable buttons. How am I supposed to do that with Bootstrap?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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>
Bootstrap 4 now offers a toggleable button group that manages the active state for you on click.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
jsfiddle-link
getbootstrap
You could try looking at button groups, this is a goup of - well- buttons... which is toggleable like a radiobutton.
JSFiddle
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
Hope this helps!
I have a set of buttons that form a selection as part of my form.
The code is below:
<div class="form-group">
<div>
<h4>Extras</h4>
</div>
<div class="radio-inline">
<input type="button" class="btn btn-default inline" name="extra" value="Garden" >
<input type="button" class="btn btn-default inline" name="extra" value="Balcony">
<input type="button" class="btn btn-default inline" name="extra" value="Parking">
</div>
</div>
However, I want to make the options not mutually exclusive i.e. you can select both 'Garden' and 'Balcony' - and I'd like to retain the button styling.
Can anyone help with this?
EDIT: Ok - got something weird going on now - Got this code.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="garden" checked=""> Garden
</label>
<label class="btn btn-default">
<input type="checkbox"> Balcony
</label>
<label class="btn btn-default">
<input type="checkbox"> Parking
</label>
</div>
When I use bootply the multiple selection user feature works great - when I add it to my page - its not working - does anyone have any idea why it may be? Below is the whole page
<div class="container">
<div class="row">
<div class="col-md-12"><h2>This is the header</h2></div>
</div>
<div class="row">
<div class="col-md-8">
<h2>Hello world!</h2>
<form d="multiform" role="form" action="listing.php" method="post" enctype="multipart/form-data">
<div><h4>Listing Type</h4></div>
<div class="radio">
<input type="button" class="btn btn-default" value="For Sale" >
<input type="button" class="btn btn-default inline" name="list_type" value="For Rent">
<input type="button" class="btn btn-default inline" name="list_type" value="Flat Share">
</div>
<div class="form-group">
<label for="text">Title</label>
<input class= "form-control" type="text" name="text">
</div>
<div class="form-group">
<label for="desc">Description</label>
<textarea class= "form-control" name="desc" rows="5"></textarea>
</div>
<!nested columns in the first one!>
<div class="col-md-6">
<div class="form-group">
<label for="total_beds">Total Bedrooms</label>
<select class="form-control" name="total_beds">
<option>Total Bedrooms</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="pets">Pets</label>
<select class="form-control" name="pets">
<option>Pets OK?</option>
<option>Yes</option>
<option>No</option>
</select>
</div>
<p>This is another p</p>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="postcode">Postcode (for Maps)</label>
<input type="text" class="form-control" name="postcode" placeholder="Post Code">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<div><h4>Extras</h4>
<div class="checkbox">
<input type="button" class="btn btn-default inline" name="extra" value="Garden" >
<input type="button" class="btn btn-default inline" name="extra" value="Balcony">
<input type="button" class="btn btn-default inline" name="extra" value="Parking">
</div>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="garden" checked=""> Garden
</label>
<label class="btn btn-default">
<input type="checkbox"> Balcony
</label>
<label class="btn btn-default">
<input type="checkbox"> Parking
</label>
</div>
</div>
</form>
</div>
<div class="col-md-4">Hello world Right! </div>
</div><! closes container!>
See the JavaScript buttons section of the Bootstrap documentation, and look at checkbox buttons:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div>