I have added radio button in a table using bootstrap 4. Whenever I click on any of the radio button it moves slightly to the left. I have added a GIF below
The code of one row from the table is given below.
<table>
<tr class="" data-id='1'>
<td>1</td>
<td>Md. Khairul Basar</td>
<td class="form-inline table_attendance">
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadio" style=" position: relative;"id="exampleRadios1" value="present">
<span class="form-check-sign"></span>
Present
</label>
</div>
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input pull-right" type="radio"
name="exampleRadio" style=" position: relative;"id="exampleRadios2"
value="absent">
<span class="form-check-sign"></span>
Absent
</label>
</div>
</td>
</tr>
<table>
If you could help me with the code then it would be great.
It seems to me that it does not move, it just simply gets bigger border and visually it looks like it moved. I guess you could solve your problem by adding to your css for the input with type checkbox this css line - box-sizing: border-box;
$('input[type="radio"]').css("box-sizing","border-box");
At first, you don't need position: relative if you don't use any top/bottom/left/right or position in child element.
The problem is due to your custom add CSS, I assume.
Try using box-sizing: border-box; It will force the element to be in original size, even if you use additional padding or border.
For clarification: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Related
I have created a series of radio buttons using boostrap version 3.3.7. I have also added a functionality such that when I click on one of those buttons the color of the radio button has to permanently change to blue. it all works fine when I load jQuery plugin with version bootstrap as shown below
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But this will cause an error to toggle button which I have implemented and it is supposed to work as a dropdown list. If I Reverse the order in which jquery and bootstrap have been loaded then the dropdown will work all good causing an error with radio buttons. I would like to mention that radio button and toggle button are different features which I am working on. This has become a tricky problem to solve. Could I know which version of jquery would work for both the features which can be compatible with Bootstrap version 3.3.7 Please find the code below.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<a href="#">
<i class="glyphicon glyphicon-dashboard"></i>
Dashboard
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" name="MontageSwap" id="MontageSwap"
onchange="montageSwap(this.value);">
<i class="glyphicon glyphicon-duplicate"></i>
Montage
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Car</li>
<li>Bus</li>
<li>Bicycle</li>
</ul>
</li>
<style>
.btn-default {
color: #D8D8D8;
background-color: #D8D8D8;
border-color: #D8D8D8;
}
.btn-default:hover {
background-color: #5F5A66;
}
.btn-default.active {
background-color: #4A90E2;
}
</style>
<div class="w3-display-container col-md-12 col-sm-10 col-xs-8" style="position:relative;top:1px;bottom:0;">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" autocomplete="off"
onchange="dataSegment(0)" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off" onchange="dataSegment(1)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off" onchange="dataSegment(2)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off" onchange="dataSegment(3)">
</label>
</div>
</div>
</div>
<script>
$('.btn.btn-default').on("click", function () {
$(this).addClass('active');
});
</script>
How radio buttons are supposed to work
How they are actually working for me
There is nothing wrong with the compatibility of bootstrap and jquery. When you are using a radio button, there can only be one active button. And since you added blue color only to those with active class, upon clicking another button, the active class gets transferred to the newly clicked button.
The only reason why the radio button gets fixed when you switch the position of the jquery and bootstrap is because bootstrap is not working anymore and causes bugs. The best way you can achieve the behavior that you want is by using checkbox instead of radio.
But if you want to insist on using radio button, you need to make another class for your color. Here's what I did, from your css code:
.btn-default.active {
background-color: #4A90E2;
}
I changed it to:
.btn-default.color {
background-color: #4A90E2;
}
and added:
.btn-default.focus{
background-color: #4A90E2 !important;
}
to override the focus class when you click on the element.
for the script, i changed the active to color
$('.btn.btn-default').on("click", function () {
$(this).addClass('color');
});
To get rid of the small square below the bar that you created, I added this:
input[type=radio]{
margin-top:-6px;
}
You may visit the JSBin sample here
As you can see there, both the functions are working fine. :)
I have the below form and am using css to display display span when radio button is clicked using the code
<style>
.glyphicon{
display: none;
}
input[type="radio"]:checked + span{
display: block;
}
</style>
<form>
<div class="form-group" id="myform">
<label for="usr">Q1:Are these dates in chronological order?1492,1941,1586 </label>
</div>
<div class="radio">
<label><input type="radio" id="opt0" name="optradio0">yes<span id="sp0" class="glyphicon glyphicon-remove"></span></label>
</div>
<div class="radio">
<label><input type="radio" id="opt1" name="optradio0">no<span id="sp1" class="glyphicon glyphicon-ok"></span></label>
</div>
<br/>
</form>
However there is a problem that the glyphicons are visible when the page is loaded. See link below
http://upscfever.com/upsc-fever/en/apti/en-apti1-chp6a.html
However when i remove the code given below the page works fine. So how can i keep the below code and still achieve the purpose.
<script>
$(document).ready(function(){
$("#header").load("http://upscfever.com/upsc-fever/header.html");
$("#footer").load("http://upscfever.com/upsc-fever/footer.html");
});
</script>
You can inspect the glyphicon in the dev console. Find out it's identifier, and then in your css, set it's initial display to none.
Don't forget to be as specific as possible to future proof it.
Using Bootstrap (3.3.6) collapse, with the collapsible DIVs located between form inputs\labels. When the DIVs expand\hide, there's a sort of snap\jitter.
The code for the problem: https://jsfiddle.net/ybto1zvk/
I've seen similar post talk about jitter when one of the DIVs has padding, but as you can see, there's no styling except what bootstrap is applying...
Have tried with Chrome and Firefox, no difference.
HTML
<form role="form">
<div class="radio">
<label>
<input type="radio" name='radioinput' id="radio1"> One (click me)
</label>
</div>
<div class="collapse" id="collapse-1">
<div class="well">
Sub 1
</div>
</div>
<div class="radio">
<label>
<input type="radio" name='radioinput' id="radio2"> Two
</label>
</div>
<div class="collapse" id="collapse-2">
<div class="well">
Sub 2
</div>
</div>
<div class="radio">
<label>
<input type="radio" name='radioinput' id="radio3"> Three
</label>
</div>
<div class="collapse" id="collapse-3">
<div class="well">
Sub 3
</div>
</div>
</form>
javascript
$('#radio1').click(function() {
$('#collapse-1').collapse('toggle');
$('#collapse-2').collapse('hide');
$('#collapse-3').collapse('hide');
});
$('#radio2').click(function() {
$('#collapse-2').collapse('toggle');
$('#collapse-1').collapse('hide');
$('#collapse-3').collapse('hide');
});
$('#radio3').click(function() {
$('#collapse-3').collapse('toggle');
$('#collapse-1').collapse('hide');
$('#collapse-2').collapse('hide');
});
This is being caused by the bottom margin property (set by bootstrap) on the well. Try adding:
.well{margin:0}
To your css, this should solve the problem.
This issue is because of collapsing margin. As per Mozilla Documentation:
Parent and first/last child: If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
In your case margin-bottom of .well inside .collapse is creating this issue. You can solve this issue by many ways. But two ways are
Add overflow: hidden on parent
Remove margin-bottom from .well
Here is Working Fiddle
Quick question I have 3 checkbox's
I want to make the text next to them white, and by text next to time I mean the YES part
any idea's ?
<div class="wrapper3">
<h3 style="color:white;"><i>Choose Your Game Preferences</i></h3>
<h4 style="color:white;"><i>Do You Want Sound ?</i></h4>
<input type="checkbox" value="No" id="sound">Yes
<h4 style="color:white;"><i>Do You want Text ?</i></h4>
<input type="checkbox" value="No" id="text">Yes
<h4 style="color:white;"><i>Do You want Flashes ?</i></h4>
<input type="checkbox" value="No" id="flash">Yes
</div>
Probably a span is easiest:
<h4><i>Do You want Flashes ?</i></h4>
<input type="checkbox" value="No" id="flash">
<span class="whiteText">Yes</span>
</div>
CSS:
.whiteText {
color: white;
}
Or with inline styling by replacing the class with a style="color:white;".
You can kill two birds with one stone by giving all your checkbxes and radio buttons labels, with a "for" attribute.
This firstly allows you to attach CSS to the label (give the label an id for this). But it is also the correct way to script checkboxes and radios these days, to make your web site accessible to the disabled. People who have impaired eyesight, or impaired handling, have difficulty clicking items as small as checkboxes. A labels becomes selectable along with the checkbox it is attached to, providing a much bigger area for the user to click on. It's good practice these days, especially if you do professional web development.
Just add a label and style the label. I ll use inline styles here but it's best practice to separate html and CSS
<div class="wrapper3">
<h3 style="color:white;"><i>Choose Your Game Preferences</i></h3>
<h4 style="color:white;"><i>Do You Want Sound ?</i></h4>
<label style="color:white;"><input type="checkbox" value="No" id="sound">Yes</label>
<h4 style="color:white;"><i>Do You want Text ?</i></h4>
<label style="color:white;"> <input type="checkbox" value="No" id="text">Yes</label>
<h4 style="color:white;"><i>Do You want Flashes ?</i></h4>
<label style="color:white;"> <input type="checkbox" value="No" id="flash">Yes</label>
</div>
I'm using some bootstrap related js that enables the use of checkboxes through html like:
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" name="checkboxA" checked="checked">
<i class="icon-unchecked checked"></i>
Item one checked
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" name="checkboxB" id="2">
<i class="icon-unchecked"></i>
Item two unchecked
</label>
</div>
Normally I could bind onto the input, but the script that handles this only changes the i checked css class. How do I do something on a change on the adding/removing of .checked on i?
Late to this but you would have to set a flag in the ViewModel and then based on the click switch your class with css binding.
<i class="checked" data-bind='css: { "nameOfYourCSS" : conditions_here } '></i>
Here's the example. I've set the css to the p tag instead because apparently you can't style checkboxes and that's exactly the reason why you might be using Bootstrap.
http://jsfiddle.net/jX6m2/3/