Inline checkbox and radio -> unecessarily different markup
Created by: bkdotcom
default stacked (and without label) markup:
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="pick me" disabled>
Giant Meteor
</label>
</div>
inline markup:
<label class="form-check-inline disabled">
<input class="form-check-input" type="checkbox" value="pick me" disabled> I'm not grey - fixed in a5
</label>
Proposed markup for inline: keep wrapper
; label's class is same as stacked; disabled class would go on the wrapper (consistent with stacked)
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="pick me" disabled>
Same is good
</label>
</div>
- The only difference is the class attribute for the outer wrapper.
- We're not removing the div + changing the label's class
- adding the
disabled
class is consistent - procedural / dynamic / templating easier.. don't need a separate template for inline,, just a different class attribute on the wrapper
It makes no difference to me whether inline is accomplished by adding the class form-check-inline
or replacing form-check
with form-check-inline
(seems like maintaining css - would be easier by adding form-check-inline
)
Different markup leads to issues like #20799 (closed) (fix pending for a5)
(currently need separate selectors for inline .disabled
)
(this annoyance exists in Bootstrap 3 as well - lets get it right in 4!)