search

rikulo / bootjack

Twitter Bootstrap ported in Dart.
https://quire.io
Apache License 2.0
88 stars 15 forks source link

Radio buttons styling problem #19

Open jamesharr opened 10 years ago

jamesharr commented 10 years ago

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). screen shot 2014-02-23 at 6 03 51 pm

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>
jamesharr commented 10 years ago

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.