Unresponsive Radio Buttons in HTML

Have you ever encountered the issue where you can't seem to select radio buttons despite them having a confirmed name attribute? Here is an example of the HTML code:

<div id="surveys-list" class="inline col-xs-12"><div>
  <div class="inline-wrapper">
    <div id="question-title"><div>
      <label class="control-label">What is your gender?</label>
    </div>
  </div>
  <div id="inline-question">
    <form class="form-horizontal">
      <div data-fields="">
        <div class="form-field-gender control-group form-field" data-field="">
          <div class="controls" data-input="">
            <label class="radio">
              <input type="radio" name="field-input-gender" id="field-input-gender-0" value="qx1-1">
              <i class="fa fa-male fa-fw"></i> Male
            </label>
            <label class="radio">
              <input type="radio" name="field-input-gender" id="field-input-gender-1" value="qx1-2">
              <i class="fa fa-female fa-fw"></i> Female
            </label>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

Interestingly, when I transfer this HTML to a different page or jsfiddle, they work perfectly and are selectable. Do you think there might be something in the JavaScript or CSS that is preventing their selection?

In my testing with this jsfiddle, even after copying over the CSS and full HTML, the radio buttons remain unselectable. Could it be an issue related to the CSS styling?

javascriptjqueryhtmlcssradio-button

Answer №1

your

<div id="continue-button">

is blocking the radio buttons, you can try using the following CSS:

max-width: 300px;
margin: 0 auto 0;
display: block;
position: relative;
top: 50px; /* added this line for spacing */

However, it's important to note that this is not the most optimal solution and is not responsive. Consider adding clearfix as recommended by Niek Nijland and Abhishek Pandey.

Answer №2

#continue-button is overlapping with the radio buttons,

To fix this issue, you can either:

#continue-button > div{
  float:left
}

or add a .clearfix class to the 

form-field-gender control-group form-field
element. Since you are using float on .controls, it's necessary to clear floats.

<div class="form-field-gender control-group form-field clearfix" data-field="">

Answer №3

To resolve your issue, it is important to include the following CSS code snippet. The problem arises from the fact that the elements with a float property within the .controls class are not contained within a clearfix block.

.form-field-gender::after {
    clear: both;
    content: "";
    display: table;
}

Answer №4

To modify the CSS, simply adjust the following code:

.inline-wrapper #continue-button {
    max-width: 300px;
    margin: 50px auto 0; //Update this line to include 50px instead of 12px
    display: block;
    position: relative;
}

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

Using the jQuery AJAX function to modify the URL query string

I currently find myself on a webpage Is there a way to add a URL query string without reloading the page? For example, when I click a button, can the URL change to using jQuery ajax functions? ...

jqueryajaxurlparametersget

hasOwnProperty function yields no results

I need help displaying a table from JSON data. Can someone assist me with the code below? <th> { x.amountForQuantity.filter((remaining) => { return remaining.hasOwnProperty(cost.key); })[cost.key] } </th> ...

javascriptreactjs

Trouble with DevExpress ASPxButton: Some Properties Fail to Update

It's been a while and I'm facing a tough challenge. I need to change the image source of an ASPxButton from the code behind, but it seems like the height, width, and border style are getting lost in the process (resulting in an image with its own ...

csswinformsdevexpressaspxgridview

utilizing Nuxt code in Elixir/Phoenix

Overview In my previous work, I combined frontend development with nuxt and backend support from elixir/phoenix, along with nginx for reverse proxy. Looking to enhance the performance of the system, my goal is now to migrate everything to Elixir/Phoenix. ...

javascriptelixirphoenix-frameworknuxt.js

Retrieve the Latest Information from the Asp.Table

My table setup is as follows: <asp:Table ID="model" runat='server'> <asp:TableRow> <asp:TableHeaderCell class="col-xs-2"> Name </asp:TableHeaderCell> <asp:TableHeaderCell class="col- ...

javascriptc#htmlasp.net

Display the background image beyond the boundaries of the div element

I am facing an issue with an image background on a website. The background consists of leaves spreading out to the middle of the page, creating a height of 600px. However, I need to divide this image into three sections: header, content, and footer. Curren ...

htmlcssbackground

Is there a way to align the navigation menu options to the right side of the navbar?

I'm having trouble aligning the options in the navbar to the right side. Can anyone help me identify where I'm going wrong in my code? Here is the snippet I'm working with: <div> <nav class="navbar navbar-expand-lg navb ...

htmlcssweb-deployment

Verify if the nested arrays within the object consist of any empty elements

Take a look at the object below: { "params": { "time_to_diagnosis": [ { "field": "date_of_diagnosis", "value": "" }, { "field": "date_of_symptom_onset", "value": "2019-09-01" } ], "time ...

javascriptecmascript-6

Show an image in JPEG format using JavaScript within an img tag

Suppose http://example.com/image returns unique image data in response headers and the image itself. Each request to http://example.com/image generates a different image that is not related to the request itself. Besides the image, additional information s ...

javascripthtmlangularjs

Guide on activating an event when a slider image is updated using jquery

I am working on a project that includes a slider. I have been trying to trigger an event when the slider image changes, but so far using the classChange Event has not been successful. Here is the link to my code: [1] https://codepen.io/anon/pen/gzLYaO ...

javascriptjquery

What is the best way to scale a div proportionally within a bootstrap grid?

Despite spending hours reading numerous online sources, I am still struggling to fully grasp the CSS/HTML box model. Specifically, I am attempting to create sections with a ratio of 3:2, where 3 represents the width and 2 represents the height. https://i.s ...

htmlcsstwitter-bootstrapsass

Create a multidimensional array from an array of objects

I am trying to organize my data by creating an array and listing each material based on its status. Here is the structure of my current array: let data = [ { Name: 'House 1', Details:[ {Materials: ...

javascriptarraysvue.jsobject

A guide on organizing and categorizing data by name with angularjs

Presented here is a list of descriptions associated with specific names. I am seeking guidance on how to group or list the descriptions by name. html: <body ng-app="app" ng-controller="MainCtrl"> <div ng-repeat="nameGroup in loopData"> & ...

javascriptangularjsfilterangularjs-ng-repeatgrouping

What is the best way to shift all elements to the right side except for 'tindog'?

https://i.sstatic.net/hAUps.png <nav class="navbar navbar-expand-lg navbar-dark "> <a class="navbar-brand" href="">Tindog</a> <button class="navbar-toggler" type="button" data-t ...

htmlcssbootstrap-4navbar

Synchronize the completion of multiple promises in ExpressJs before sending a response

My POST API contains some logic that needs to wait for all promises to finish before sending the response. However, I'm facing an issue with making my server wait using await Promise.all(tasks); I've tried various approaches and even used librar ...

javascriptnode.jsexpresspromise

Use JavaScript to illuminate individual words on a webpage in sequence

Is there an effective method to sequentially highlight each word on a web page? I'm thinking of breaking the words into an array and iterating through them, but I'm not sure what the best approach would be. I have experience with string replacem ...

javascripthtmlstringhighlighting

Issue with arrow functions in Reactjs Material-UI - Unexpected token error

I am currently trying to integrate components from material-ui into a project based on react-rocket-boilerplate. An error message is appearing: [23:55:11] gulp-notify: [Compile Error] C:/react-rocket-boilerplate/app/js/components/Sidebar.js: Unexpected ...

javascriptreactjsgulpmaterial-uiarrow-functions

The React.js search feature consistently retrieves identical content every time

I am currently working on a project to create a search engine using React.js, specifically to search for GIPHY gifs through their API. However, I have encountered an issue where the gifs displayed do not update when I type in new words after erasing the pr ...

javascriptreactjsfetch-api

Struts2 JSON FullCalendar Integration

Having trouble fetching data from JSON for my Fullcalendar Jquery function. I've gone through the documentation but the example provided isn't clear to me. Here is a snippet of my code: <script> $(document).ready(function() { $(' ...

jqueryjsonstruts2fullcalendar

Exploring the process of assigning IDs to anchors in CodeIgniter and implementing them in jQuery

I am trying to assign an ID to an anchor tag in CodeIgniter and then use that ID in jQuery. Can anyone explain how to set the ID in the code below and how to access it using `$()` in jQuery? anchor('welcome/remove_rcrd/'.$row['id'], &a ...

phpjquerycodeigniter