ion-Checkbox only on box clickable

Question

I want to separate my <ion-checkbox> from <ion-label>. So the main issue is that I have to display additional informations if you click on the label, but you should not activate the checkbox. The checkbox should only be activated, if clicked on the "checkbox icon/checkbox square".

<div>
  <ion-list>
    <ion-item *ngFor="let list of list">
    <ion-label (click)="showAdditionalInformations()">{{list.item.free_text}}</ion-label>
    <ion-checkbox *ngIf="list.item.checkbox==true"></ion-checkbox>
  </ion-item></ion-list>
</div>

Can someone help me?

Álvaro Herrero · Accepted Answer · 2019-04-24 14:25:40Z

10

This does not work with Ionic 4 because Shadow Dom creates a button element that overlays the label element and captures the click events. A workaround for Ionic 4 is to wrap the ion-checkbox with a span, and make it relative. This way, the button in the Shadow Dom will fit only this new span, keeping the label free to asign a custom click event.

<span class="checkbox-container">
    <ion-checkbox slot="end" formControlName="accept"></ion-checkbox>
</span>

.checkbox-container {
   position: relative;      
}

answered Apr 24, 2019 at 14:25

Álvaro Herrero

1511 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akriti · Accepted Answer · 2019-07-19 07:35:11Z

8

For ionic-4, give the property "position:relative" to ion-checkbox. It works !

ion-checkbox {
   position:relative;
}

edited Jul 19, 2019 at 7:35

answered Jul 19, 2019 at 7:27

Akriti

811 silver badge2 bronze badges

Comments

user9088454 · Accepted Answer · 2019-04-24 16:42:54Z

2

You can try to add this piece of code to your CSS. It will hide the overlay which wraps both your checkbox and your label.

ion-checkbox .item-cover{
  display:none;
}

edited Apr 24, 2019 at 16:42

user9088454

1,1771 gold badge15 silver badges48 bronze badges

answered Aug 30, 2018 at 9:22

Augustin R

7,8593 gold badges30 silver badges54 bronze badges

2 Comments

Marcel Over a year ago

I tried this solution before, but the checkbox is still getting checked by clicking on the label.

Marcel Over a year ago

ah im stupid.... i missed out the spacer between ion-checkbox and .item-cover. Works fine, thank you!

TheOne LuKcian · Accepted Answer · 2019-02-01 13:16:45Z

2

This did the trick for me:

ion-checkbox {
    .item-cover {
        width: 70px;
    }
}

answered Feb 1, 2019 at 13:16

TheOne LuKcian

8910 bronze badges

Comments

TomG · Accepted Answer · 2022-04-17 18:53:09Z

1

For whoever gets here via Google like me, using Ionic 6 (2022) - I resolved this issue giving the label a z-index:3.

This also works for an ion-button slotted at end.

<ion-item>
  <ion-label>Select/unselect all</ion-label>
  <ion-checkbox slot="start" (ionChange)="selectAllFarmers($event)"></ion-checkbox>
  <ion-button style="z-index:3" slot="end" (click)="exportSelectedFarmers(remoteFarmers)">Export selected</ion-button>
  <ion-button style="z-index:3" slot="end" (click)="finaliseSelected()">Finalise farmers</ion-button>
</ion-item>

Credits: https://rubberchickin.com/how-to-fix-ion-checkbox-stealing-clicks-on-ion-item-elements/

answered Apr 17, 2022 at 18:53

TomG

5975 silver badges12 bronze badges

1 Comment

Alex Ryltsov Over a year ago

This also works for Ionic 6.x

Dave Gööck · Accepted Answer · 2019-05-22 15:07:22Z

0

For ionic 4 there is a workaround by using the start slot of ion-item as laid out here.

<ion-item lines="full">
  <ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>

  <ion-label slot="start" (click)="labelClicked()">
    This is a separately clickable label
  </ion-label>
  <ion-checkbox slot="end"></ion-checkbox>
</ion-item>

With lines="full" the bottom border is fixed.

answered May 22, 2019 at 15:07

Dave Gööck

4052 silver badges17 bronze badges

Collectives™ on Stack Overflow

ion-Checkbox only on box clickable

6 Answers 6

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related