Bootstrap: Custom radio, click between text and radio not working

[effetb]

Hi,

On bootrstap 4 custom radio or checkbox, there is 0.5rem of space between the custom control and the text, this lead to a problem when you click on that space, it's not enabling the control.

The .custom-control div wrapping the input and the label has a left padding of 1.5rem.
A better solution would be to set a left padding of 1rem to the wrapping div and add a 0.5rem left padding on the label element itself.

By doing this, the space would still be present between the radio and the text but it would be clickable.

Here you can see a jsfiddle demonstrating it : http://jsfiddle.net/y4up67gk/

Thank you

[tmorehouse]

I've noticed this as well for custom radio, checkbox and the new switch style checkboxes.

[kevinruscoe]

This one confused me. I'm unsure why they designed it in this way. To me, it makes more sense to remove the padding-left from the containing .custom-control, and add it to .custom-control-label. Then the svg sits within the padding, and the entire thing is clickable.

see: https://jsfiddle.net/zyomw34k/

[mdo]

We use padding-left here so that all children elements of .custom-control (like the label, form validation message, additional help text, etc) is all easily aligned with the label text. See <
https://jsfiddle.net/pz3xh0uq/> for an example of what I mean.

Without this, we’d have to manually set the padding-left or margin-left of these children elements, or require them to be part of the <label>, which seems unnecessary and, in some cases, invalid. At the very least, it’s problematic for screen reader technologies that would announce everything in the <label>.

I’ve been playing with a new approach to checks/radios for v5 that would merge the native and custom form controls. See https://codepen.io/anon/pen/xmOEvx. This example was intended to explore a few things:

• Can we easily customize the check/radio without custom HTML or ::before/::after? Turns out we perhaps can! With the help of appearance: none, we can theoretically style the input as if it were another element.

• Can we use flexbox to build the checks/radios? Answer I’ve found is that no, we cannot. Not without adding more markup as we need a row direction for the input and label, but then we need a column direction with the label, validation, help text, etc. This isn’t an issue if no one does this, but these are all common patterns.

• Can we make the tap target larger? As mentioned above, not without some trade offs. Moreover, there’s a reason we don’t do a block-level label as the wrapper—the negative space next to any label text would also be clickable. As such, I don’t think we should even be optimizing for this—clicking empty space should be clicking empty space.

• Can we get away from position: absolute;? Probably! This demo uses a floated input with some margin-top to vertically align itself with the label’s text baseline.

• Could we swap for em units to enable sizing? Yup, just haven’t done it in the demo yet. Once we move to this, we can use font-size utilities or inheritance to change their size. I dislike accidental inheritance though, so I’m unsure how much I want to do this in v5. Thoughts appreciated!

Feels like we’ll never get this 100% right for everyone’s expectations, and that’s okay. We’re trying to build the most flexible, bulletproof, and customizable components. Let me know what you think of the above example and thinking.

[effetb]

Hi,
Thank you for your explanations it makes sense.
To keep the padding on the .custom-control, putting a negative left margin of 0.5rem and a left padding of 0.5rem to the label can do the job : http://jsfiddle.net/2uxbtd1p/

For the click on whitespace, when you have very small label like for example a number selection, it's harder to enable the radio/checkbox, that's why I think it would be a great improvement to do this.
Best regards

[kevinruscoe]

The explanation makes sense to me too. In fact, I don't think we should even be talking about this 'problem' anymore, because there isn't one. The checkbox and the label are different elements, the whitespace is just that - whitespace. I now feel that if you need the whitespace clickable due to small labels, then you can simply add the 5 or so lines to your CSS to get it to work.

I'm happy with how it works currently, and I think the appearance method, with absolute position for alignment, is probably the best way to go.

Thanks again @mdo

[mdo]

Closing out per my comment above. Probably not going to do the padding/margin hack as that feels largely unnecessary and potentially complicates (customizing) gutter spacing.