We Keep Coding

Bootstrap 4 radio button is moving to left when clicked

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

Display glyphicon in block immediately when radio button is checked

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.

How can I change the text color next to a checkbox

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>

Hidding checkbox inside a JQM checkboxgroup

I have a control group with checkboxes that I want them to be hidden initially, which I achieved with css, during runtime I would like to show those checkboxes at a certain time, but only from the control group that I specify because there are many of them on the page.
The problem that I'm having is to select the visual checkbox since it is being rendered as a "::after" text and I don't know how to select it using JQuery.
<div data-role="controlgroup" id="test-list">
<label for="id1">
<a href="#" onclick="alert('The list item has been clicked.'); event.stopPropagation(); return false;">
<h2>Title</h2>
<p>Description Text</p>
</a>
</label>
<input type="checkbox" id="id1" />
</div>
will render as:
<div class="ui-checkbox">
<label for="id1" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off ui-first-child">
<a href="#" onclick="alert('Clicked'); event.stopPropagation(); return false;" class=" ui-link">
<h2>Title</h2>
<p>Description</p>
</a>
::after <!-- This is what renders as the checkbox -->
</label>
<input type="checkbox" id="id1" name="p1">
</div>
I tried a few tricks but can't select the "::after" which is what draws the checkbox inside the list.
$("#test-list label").first().next()
$("#test-list label").children().eq(0).next()
The css when the page loads to hide them:
.ui-btn.ui-checkbox-off:after, .ui-btn.ui-checkbox-on:after
{
visibility: hidden;
}

jQuery cannot access pseudo elements like :after because they are not really in the DOM. You might get what you want by adding and removing a class that hides the :after element. First create a new CSS class:
.hiddenCheck:after {
display: none !important;
}
Then apply it to the <label> that jQM creates for the checkbox:
$("#id1").parents(".ui-checkbox").find("label").toggleClass("hiddenCheck");
NOTE: different selectors can get you there (e.g. closest(), etc.).
DEMO
Click the button to hide/show the checkbox...

Adding active class doesn't affect toggle button in Twitter Bootstrap

I have a form with multi checkbox which is required field that I turned into twitter bootstrap toggle buttons.
I am trying to activate a selection button with js, by adding 'active' class to it.
I am able to add the class but when saving the form I am getting an error that the field is required.
What am I missing?
Here is the form.
<div id="reminder">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_1" value="1" title="Choose at least one reminder option">Now</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_2" value="30" title="Choose at least one reminder option">30m</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_3" value="60" title="Choose at least one reminder option">1h</label>
<label class="btn btn-primary active">
<input type="checkbox" name="reminder" id="id_reminder_4" value="120"
title="Choose at least one reminder option">2h</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_5" value="1440"
title="Choose at least one reminder option">1d</label>
</div>
</div>
This is how I am adding the class:
$('#reminder label:eq(3)').addClass('active')

You're only adding the class, but you don't actually select it. Add the selected attribute and it will work:
$('#reminder label:eq(3)').addClass('active').attr('selected',true);
Here is a demo

Add class open not active to open the dropdown (if thats what you are trying to do). You have to add the class to <li class='dropdown open'> which hosts the <ul class='dropdown-menu'>

btn-primary is the css that will make your buttons blue. It looks like this is what you are using for inactive buttons because the way you have your code, all the buttons should be blue. If you are trying to make the button grey because grey will be your active button, then you can use removeClass('btn-primary'). This will turn it grey. Hope this helps.