Skip to content

radio/checkbox with .input-sm #18748

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Yahasana opened this issue Jan 2, 2016 · 10 comments
Closed

radio/checkbox with .input-sm #18748

Yahasana opened this issue Jan 2, 2016 · 10 comments
Labels

Comments

@Yahasana
Copy link

Yahasana commented Jan 2, 2016

there is 4px margin from top and make the line ship down.
see http://jsbin.com/vixilabewe/edit?html,css,output

@twbs-lmvtfy
Copy link

Hi @Yahasana!

You appear to have posted a live example (http://jsbin.com/vixilabewe/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

  • line 42, column 5 thru column 10: Stray end tag div.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@cvrebert
Copy link
Collaborator

cvrebert commented Jan 2, 2016

After removing that stray </div>: http://jsbin.com/jezakel/edit?html,css,output

@twbs-lmvtfy
Copy link

Hi @cvrebert!

You appear to have posted a live example (http://jsbin.com/jezakel/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • line 12, column 5: E003: Found one or more .rows that were not children of a grid column or descendants of a .container or .container-fluid
  • line 17, column 5: E003: Found one or more .rows that were not children of a grid column or descendants of a .container or .container-fluid
  • line 29, column 5: E003: Found one or more .rows that were not children of a grid column or descendants of a .container or .container-fluid
  • line 37, column 5: E003: Found one or more .rows that were not children of a grid column or descendants of a .container or .container-fluid
  • line 22, column 9: E042: .form-control cannot be used on non-textual <input>s, such as those whose type is: file, checkbox, radio, range, button
  • line 34, column 9: E042: .form-control cannot be used on non-textual <input>s, such as those whose type is: file, checkbox, radio, range, button
  • W002: <head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes
  • W003: <head> is missing viewport <meta> tag that enables responsiveness

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@cvrebert
Copy link
Collaborator

cvrebert commented Jan 2, 2016

As noted by the bot, your usage of .form-control (and thus .input-sm) is invalid.

@Yahasana
Copy link
Author

Yahasana commented Jan 2, 2016

is there any markup solution to make radio/checkbox {sm, lg}?

@cvrebert
Copy link
Collaborator

cvrebert commented Jan 5, 2016

Not that I know of offhand. I've filed a feature request for it for Bootstrap v4 though: #18761

@cvrebert
Copy link
Collaborator

cvrebert commented Jan 7, 2016

Depending on your use case, input groups might work; see http://getbootstrap.com/components/#input-groups-checkboxes-radios

@Yahasana
Copy link
Author

@cvrebert if you double check the checkbox/radio in the input group addon, you will find that they are not vertical align in middle at all

PS: Firefox 43.0.3 in WinXP sp3

@cvrebert
Copy link
Collaborator

Eh, it's not perfect, but it's not terrible either.
Anyway, checkbox/radio alignment is WontFix for v3 since it's such a can of worms. See #13936 (comment)

@Yahasana
Copy link
Author

thanks for your patient explanation. I fixed it by myself. whoa!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants