bootjack

bootjack copied to clipboard

For for <input type="radio"> elements within a button group, data-toggle="buttons-radio" breaks CSS styling and data-toggle="buttons" (official bootstrap styling) does not provide toggle functionality.

Styling screenshot (the latter does not provide toggle functionality).

To recreate this issue, use the radio button example from bootstrap.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

CSS workaround.

[data-toggle="buttons-radio"]>.btn>input[type="radio"] {
    display: none;
}

[data-toggle="buttons-checkbox"]>.btn>input[type="checkbox"] {
    display: none;
}

A fix that uses bootstrap-style attributes seems preferable, but that requires modifications to the Dart code that breaks existing HTML code. I think I can make the modifications, but I want to make sure that a compatibility-breaking patch would be accepted.