.checkbox-single & .radio-single clickable area issue

[0xadri]

When the checkbox/radio-button is without a label (using .checkbox-single or .radio-single accordingly), the clickable area is buggy:

1. The clickable area is not as big as the icon
2. The :hover effect switches from cursor to default depending which area of the icon I hover

I think the reason for this is that the input button does not take the whole parent div.

note: I just noticed that the 2nd issue is also happening when the checkbox/radio-button is with a label

ps. testing on Chrome Version 48.0.2564.103 (64-bit)

[gandaldf]

+1

[keverw]

+1

[ahmadbadpey]

@adrien-be , you can use this:

<div class="checkbox checkbox-danger checkbox-single checkbox-sm">
     <input type="checkbox" name="item_check[]" id="mycheckbox">
     <label for="mycheckbox"></label>
</div>

just create an empty label but has a for referenced to checkbox

[tophopstop]

+1

[hesham-faragallah]

+1

[AndreasHerss]

+1 for this, i also ave problems with the clickable area not being the full size, this is when im using with labels. bit confusing for the users.

[CyrilMazur]

+1 same issue, @ahmadbadpey 's solution works although it makes the clickable area larger than it should be. Better too large than too small in that case.

[ChadSikorra]

While the empty label approach works in most cases, there are some where it doesn't. For example, trying to get this working correctly with bootstrap-table has been a real pain (still can't get it working in the header right because of this).