After clicking, the radio button in Bootstrap 4 shifts to the left

I encountered an issue where the radio button I added to a table using Bootstrap 4 moves slightly to the left whenever I click on it. To better illustrate the problem, I have included a GIF below: https://i.sstatic.net/4aj8f.gif

Below is the code for one row from the table:

<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 anyone could provide assistance with resolving this issue in the code, it would be greatly appreciated.

javascriptjquerycssbootstrap-4

Answer №1

From my perspective, the movement appears to be an illusion caused by the border growing in size. To resolve this issue, you may consider integrating the following line of CSS code to your checkbox input: box-sizing: border-box;

Answer №2

   Adjust the box-sizing property of radio input elements with jQuery:
   $('input[type="radio"]').css("box-sizing","border-box");

Answer №3

Initially, if you are not utilizing any top/bottom/left/right or position in the child element, there is no need for position: relative. It seems like the issue may be related to your custom CSS.

Consider implementing box-sizing: border-box; This will ensure that the element retains its original size, even when additional padding or border is applied.

For further clarification, visit: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating CSS styles for a selected input field

I seem to be stuck in a situation where my screen looks similar to the screenshot provided. There are four input elements that I would like to have bordered just like in the image, complete with a circled tick mark. I've managed to create these four i ...

javascripthtmlcssreactjsmaterial-ui

Take away the follow option on the embedded tweet

I need to customize the appearance of embedded tweets on a website by removing the follow button as well as the reply, favorite, and retweet buttons in the footer. Here is a simple HTML example: <blockquote class="twitter-tweet"> <a href="htt ...

jqueryhtmlcsstwitter

Basic Chinese HTML Markup

As a college student, I find myself in the unique situation of taking two seemingly unrelated classes that have unexpectedly merged together - programming and Chinese language. In my C++ class, while learning to code in HTML, I took the opportunity to crea ...

htmlc++csschinese-locale

Automatically add shimmer with CSS styling

Is it possible to make the shine effect work automatically (without needing hover) every 5 seconds? http://jsfiddle.net/AntonTrollback/nqQc7/ .icon:after { content: ""; position: absolute; top: -110%; left: -210%; width: 200%; height: 200%; ...

jqueryhtmlcssanimationeffects

Leveraging a service variable in Angular

Is there a way to access data shared in a service within a directive? Let's say we have a directive called resultsDirective, and a service named dataService. How can we retrieve a variable from the service within the directive? angular.module("someMo ...

javascriptangularjs

Tips for retrieving return values from AJAX URL content

As I am writing some code to send data from one page to another through the ajax URL, I encountered an issue where the retrieved values on the previous page are showing as null. The first page code looks like this: <script> function myFunction() { ...

javascriptphpajax

What are the benefits of declaring variables with JSON in a JavaScript file instead of simply reading JSON data?

Lately, I've been delving into the world of leaflets and exploring various plugins. Some of the plugins I've come across (like Leaflet.markercluster) utilize JSON to map out points. However, instead of directly using the JSON stream or a JSON fi ...

javascriptjsonleafletgeojsonleaflet.markercluster

What is the best way to store data in a variable in a PHP file and then send it back as a response to an ajax request?

I'm currently working on a project for school where I need to create a database. One issue I've encountered is with receiving a JSON object from PHP. I was able to send data to my PHP file, but I'm having trouble returning it as a response t ...

phpjqueryajax

Using AJAX to submit a form and then refreshing the page within the current tab

I am facing an issue with my web page that contains multiple tabs, some of which have forms. Whenever a form is successfully submitted, the page reloads but always goes back to the default first tab. To address this, I am attempting to use a storage variab ...

javascripthtmljqueryajaxforms

Building a table from JSON using only JavaScript.orGenerate a

I am working with a dynamic Json containing multiple keys that may vary. Here is an example: Var children = [{num = 6, name = me, phone = 7}, {num = 8, name = him, phone = 9}] My goal is to create a table with the headers (num, name, phone) Is there a w ...

javascriptjson

Change the z-index of divs when clicked

When a button is clicked, I want to iterate through a group of absolutely positioned children divs with varying z-indexes. The goal is for the z-index of the currently visible div to decrease on each click, creating a looping effect where only one div is v ...

javascriptjquerycss

Is it feasible in Vue to import an scss file with deep selectors into the scoped styles of a component?

Is it possible to extract a Vue component's scoped SCSS with deep selectors into a separate file and then import it back in? For example: // Main.vue <template> <div id="main"> <h1>Title</h1> <span>Text< ...

cssvue.js

Jquery is causing some issues with the code provided:

This is the code snippet from script.js: $(document).ready(function() { $('#mainobject').fadeOut('slow'); }); Here is a glimpse of index.html: <!DOCTYPE html> <html> <head> <title>Hitler Map&l ...

javascriptjqueryhtml

AngularJS Datepicker - calendar dropdown does not update when the model changes

I've been facing a challenge with the AngularJs datepicker in my project for some time now. Within my application, users have the option to either manually select a date using the calendar or click on "This Month" to automatically set the date to the ...

javascriptjqueryangularjsdatepicker

The dangers posed by vulnerabilities in the React library

Hi there, I just finished setting up react-redux and noticed some vulnerabilities showing up in my console - both low and high. Can anyone explain what this means and if I should consider uninstalling it? ...

javascriptreactjsweb-applicationsreact-redux

Is there a way to add objects to the body of a component in React?

I am new to React and currently working on setting up a function for a React component. This function should allow users to add or remove empty radio button options on a page where they can input text. However, I am facing some challenges in implementing t ...

javascriptreactjsjsx

Chrome-specific bug in DataTable sorting with jQuery - looking for workaround to fix the issue

Here is my code snippet: jQuery.fn.dataTableExt.oSort['num-asc'] = function(a,b) { var x = a.replace( /<.*?>/g, "" ); var y = b.replace( /<.*?>/g, "" ); x = parseFloat( x ); y = parseFloat( y ); return ((x < y ...

jquerysortingdatatable

Header with absolute positioning doesn't play nice when nudged in Chrome

Take a look at the HTML page on this JSFiddle link: http://jsfiddle.net/rb8rs70w/2/ The page features a "sticky" header created using CSS with the property position: absolute. ... <body class="body-menu-push"> <header role="banner"> ...

htmlcssgoogle-chrome

Encountered an error when attempting to use 'appendChild' on 'Node': the first parameter is not the correct type. It was able to work with some elements, but not with others

I'm currently working on a script that utilizes fetch to retrieve an external HTML file. The goal is to perform some operations to create two HTMLCollections and then iterate over them to display a div containing one element from each collection. Here ...

javascripthtmldomchild-nodes

Ways to dynamically update a Vuetify 3 element's placeholder text?

Here is the code snippet from my component.vue file: <template> <v-text-field name="Foo" :label="$t('foo')" type="text" hint="This is a hint" persistent-hint >& ...

javascripttypescriptvue.jsvuetify.jsvuejs3