Skip to content

Custom stacked checkbox label stretches to full width #24888

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.

Sign up for GitHub

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

Jump to bottom
Closed
jacobmllr95 opened this issue Nov 27, 2017 · 1 comment
Closed

Custom stacked checkbox label stretches to full width #24888

jacobmllr95 opened this issue Nov 27, 2017 · 1 comment
Labels
css has-pr v4

Comments

@jacobmllr95
Copy link
Contributor

jacobmllr95 commented Nov 27, 2017 •
edited
Loading

Operating system and version: Any
Browser and version: Any
Test case: https://getbootstrap.com/docs/4.0/components/forms/#stacked

bootstrap_v4_custom_checkbox_stacked_old

As seen in the picture above, the label of a stacked checkbox stretches to the full with of the parent container. This can cause issues when a user clicks far right from the visible label and accidentally toggles a checkbox or radio.

A simple fix would be to set align-items for the custom-controls-stacked container to flex-start (see picture below).

bootstrap_v4_custom_checkbox_stacked_new
@jacobmllr95 jacobmllr95 changed the title Custom stacked checkboxes label full width Custom stacked checkbox label stretches to full width Nov 27, 2017
@mdo
Copy link
Member

mdo commented Nov 27, 2017

This will be fixed by #23444.

@mdo mdo mentioned this issue Dec 21, 2017
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css has-pr v4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mdo @jacobmllr95