I have some radio buttons that are being rendered as actual buttons and the selected one bleeds into the modal-footer. I am using bootstrap. The code is:
<td>
<div class="btn-group radio-group" data-toggle="buttons">
<label class="btn btn-default">
<input id="ID1" name="Name1" type="radio" value="True">
A
</label>
<label class="active btn btn-default">
<input checked="checked" id="ID1" name="Name1" type="radio" value="False">
B
</label>
</div>
</td>
And here is a picture of what's happening.
I know that I'm not including all of the CSS and Modal code, but I'm hoping someone can at least point to a direction for research.
Thanks!
Related
<div class="form-row">
<div class="column">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active" for="visualContagi">
<input type="radio" name="options" id="visualContagi" checked> Contagi
</label>
<label class="btn btn-primary" for="visualGuariti">
<input type="radio" name="options" id="visualGuariti" checked> Guariti
</label>
<label class="btn btn-primary" for="visualDecessi">
<input type="radio" name="options" id="visualDecessi" checked> Decessi
</label>
<label class="btn btn-primary" for="visualRicoveri">
<input type="radio" name="options" id="visualRicoveri" checked> Ricoveri
</label>
<label class="btn btn-primary" for="visualTotPos">
<input type="radio" name="options" id="visualTotPos" checked> Totale Positivi
</label>
</div>
</div>
</div>
Hi, I have this radio button group as part of a form. The problem is that the buttons all get the "active" class applied to them when I load the webpage. I haven't written any javascript, it's just bootstrap, and this CSS applied to remove the outline when I click on the buttons:
.btn-primary.focus, .btn-primary:focus {
box-shadow: none;
}
I'm using the latest version of Firefox on macOS.
What I am noticing is that each of your <input type="radio" elements have the checked attribute attatched to them. If you remove that, then it should be fixed. I hope this helps!
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>
I am using radio buttons in Bootstrap 4 like this:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" id="physical-option" onclick="alert('Physical!')" checked="checked" /> Physical
</label>
<label class="btn btn-primary">
<input type="radio" id="scenery-option" onclick="alert('Scenery!')" /> Scenery
</label>
</div>
As you can see I have the onclicks there. But, when I click them, nothing happens! Is this a bug in Bootstrap?
Can you put the onclick on the label instead of the radio? I think bootstrap makes the label the radio trigger instead of the actual radio button.
Have a look at the scenery button:
https://jsfiddle.net/zf7p2Lbd/
<label class="btn btn-primary" onclick="alert('Scenery!')">
<input type="radio" id="scenery-option" /> Scenery
</label>
Preselecting a radio button in twitter's bootstrap without using jquery.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="athletebutton" value="1" checked> Athlete </label>
<label class="btn btn-primary">
<input type="radio" name="options" id="coachbutton"> Coach </label>
</div>
Mark the label class with active
See screenshots & video here:
Video:http://d.pr/v/b3Gm
Screenshot: