You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<divclass="form-check disabled"><labelclass="form-check-label"><inputclass="form-check-input" type="checkbox" value="pick me" disabled>
Giant Meteor
</label></div>
inline markup:
<labelclass="form-check-inline disabled"><inputclass="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)
<divclass="form-check form-check-inline disabled"><labelclass="form-check-label"><inputclass="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 (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!) 🤓
The text was updated successfully, but these errors were encountered:
bkdotcom
added a commit
to bkdotcom/bootstrap
that referenced
this issue
Oct 25, 2016
Original thinking was if I could keep markup and styling simpler, I should try to do so. Totally get that this leads to more complications though, so happy to take a look at the associated PR more.
default stacked (and without label) markup:
inline markup:
Proposed markup for inline:
keep wrapper
disabled
class is consistentIt makes no difference to me whether inline is accomplished by adding the class
form-check-inline
or replacingform-check
withform-check-inline
(seems like maintaining css - would be easier by addingform-check-inline
)Different markup leads to issues like #20799 (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!) 🤓
The text was updated successfully, but these errors were encountered: