Entire checkbox row should be clickable, not just the icon

ionic-v1
1

Official codepen:

CSS overview:

My codepen:

In the current checkboxes, the circular checkbox needs to be precisely clicked. I want to be able to click anywhere in the row to select and unselect the checkboxes.

In my codepen (the second group in it) I put the text inside of label tags but it looks bad (not nicely formatted with css) and I can’t select the checkbox if I click to the right of the text.

The radio buttons work in a similar way to how I want the checkboxes to work:

To choose a radio you can click anywhere in the row…

Though there is a lot of markup… I prefer using ion-radio

http://ionicframework.com/docs/api/directive/ionRadio/

The last item in my codepen is ion-checkbox ( http://ionicframework.com/docs/api/directive/ionCheckbox/ )

Even though the checkbox text is inside of the ion-checkbox tags clicking on the text does nothing.

I’d like this to be fixed please. If the whole row can’t be clickable I’d at least like the label to be clickable.

2

BTW here it says:

http://ionicframework.com/docs/components/#checkbox

Ionic prefers to use the <label> element for a checkbox item in order to make the entire checkbox tappable.

and here it says:
http://ionicframework.com/docs/components/#radio-buttons

Ionic prefers to use the <label> element for a radio item in order to make the entire area tappable.

Maybe in the first quote it also meant “in order to make the entire area tappable” (talking about an entire checkbox tappable doesn’t make sense - I mean it’s not like it is sometimes half tappable)

3

Good catch! At first glance, looks like it’s fixed by putting .item.item-checkbox label { width: 100%; }

Could you open an issue? http://ionicframework.com/submit-issue

4

I’ve opened the issue and thanks for your fix - it works…

5

was it really? I’m still getting similar behavior. only the checkbox is checkable

6

@morenoh149 If you paste .item.item-checkbox label { width: 100%; } into style.css it works.

1 Like
7

very nice! works like a charm. Maybe should be added to docs.

8

It seems to have been fixed recently in Ionic’s code - but I guess that isn’t the current version on this site