Radio buttons and checkboxes break when label text wraps (e.g. on a mobile display)

[jonathanconway]

Bug - Radio buttons and checkboxes break when label text wraps (e.g. on a mobile display)

What I did

I built a radio-button-list, using markup similar to the following:

<form>
  <fieldset>
    <div>
      <input type="radio" id="x" name="x">
      <label for="x">This is some text that will wrap when the screen size is reduced to the equivalent of a mobile display width. When this happens, the little black dot inside the circle will drop out.</label>
      <input type="radio" id="y" name="y">
      <label for="y">Blah blah</label>
    </div>
  </fieldset>
</form>

What browser and device I was using

Chrome, MacOS 10.12.3

What I expected to see

The little black dot inside the circle.

What I saw

The little black dot outside the circle.

[mgdhs]

Here is a simple override which should work:

// A fix for long labels on checkboxes and radios
form {
  input[type='radio']+label,
  input[type='checkbox']+label {
    position: relative;
  }
  input[type='checkbox']{
    &:checked {
      &:after {
        float: none !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        position: absolute;
        top: 5px !important;
        left: 5px;
      }
    }
  }
}