Html Radio Buttons Not Selectable

Question

Any ideas why I can't select either of these radio buttons? Typically this occurs when they don't have a name attribute but I've confirmed that these both do:

<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>

Oddly enough when I add just the html to a different page or jsfiddle, it seems to work fine from a selectable perspective.

Is it possible that something in the javascript or css could be preventing these from being selectable?

In this jsfiddle I copied over the CSS and the full html page. The buttons don't see selectable so possibly it's something in the CSS?

Works just fine for me, try create a snippet that shows the problem — Carsten Løvbo Andersen, Mar 20 '17 at 13:01
_"Is it possible that something in the javascript or css could be preventing these from being selectable?"_ - you haven't shown us either. — Turnip, Mar 20 '17 at 13:04
right, no javascript or CSS code is given. Best to set up an example on jsfiddle or give a URL to the site to show the problem. — Ken H., Mar 20 '17 at 13:08

goosmaster · Accepted Answer · 2017-03-20T13:44:13.873

1

your

<div id="continue-button">

is in the way of the radio buttons, try using

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

But please note this is not the best practice. Not even responsive, please consider adding clearfix as suggested by Niek Nijland and Abhishek Pandey

edited Mar 20 '17 at 13:44

answered Mar 20 '17 at 13:16

goosmaster

146
11

1

This solution works, but I don't think this is the best practice. Try adding a clearfix class to `.form-field-gender`. Here's some information about clearfix: http://stackoverflow.com/questions/8554043/what-is-a-clearfix. – Niek Nijland Mar 20 '17 at 13:23
@TomHammond This answer worked for you, but this is just a short-term solution, as you are using bootstrap, it good to use `clearfix` class, ***[check fiddle](https://jsfiddle.net/bxn35azn/)*** – Abhishek Pandey Mar 20 '17 at 13:39

Abhishek Pandey · Answer 2 · 2017-03-20T13:22:29.337

1

#continue-button is overlapping radio,

Use

#continue-button > div{
  float:left
}

or Use .clearfix on form-field-gender control-group form-field because you are using float on .controls, you need to clear floats.

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

edited Mar 20 '17 at 13:22

answered Mar 20 '17 at 13:17

Abhishek Pandey

13,302
8
38
68

score 1 · Answer 3 · answered Mar 20 '17 at 13:23

1

You need to add this css. Problem is that .controls which have float< isn't in clearfix block

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

answered Mar 20 '17 at 13:23

Angelzzz

1,356
2
10
20

score 1 · Answer 4 · answered Mar 20 '17 at 13:23

1

You can just change below css.

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

answered Mar 20 '17 at 13:23

Pravin Vavadiya

3,195
1
17
34

Html Radio Buttons Not Selectable

4 Answers4