CODEWITHSUNDEEP
checkboxclickionic3label
user3681549
user3681549

Reputation:

ion-item with checkbox and "a" element - click on "a" element clicks whole item and checkbox

I have ion-item, with ion-checkbox and ion-labels elements inside, and an a element inside ion-label:

<ion-item class="userAgreement" text-wrap no-border no-lines>
  <ion-checkbox formControlName="agreementCheckbox"></ion-checkbox>
  <ion-label>I accept the terms of 
     <a (click)="GoToUserAgreementPage()" class="linkText">User 
     Agreement</a>
  </ion-label>
</ion-item>

Checkbox is clickable itself, but when I click on User agreement text inside ion-label, whole ion-item is clicked and it affects checkbox. I want checkbox to be clickable only if clicked on itself, and be able to click only on that part of text inside a element inside ion-label.

Upvotes: 0

Views: 1118

Answers (3)

EXPERT AD
EXPERT AD

Reputation: 1

Just wrap the ion checkbox with an ion-item. In my case I don't want any label but if you want just use for.

<ion-item class="userAgreement" text-wrap no-border no-lines>
  <ion-item>
    <ion-checkbox formControlName="agreementCheckbox"></ion-checkbox>
  </ion-item>
  <ion-label>I accept the terms of 
     <a (click)="GoToUserAgreementPage()" class="linkText">User 
     Agreement</a>
  </ion-label>
</ion-item>

Upvotes: 0

Chris
Chris

Reputation: 94

Try wrapping the ion-checkbox within another ion-item. It appears to me the parent ion-item will not propagate click events to any controls inside child ion-items.

Clicking on the child ion-item will toggle the checkbox as expected.

<ion-item class="userAgreement" text-wrap no-border no-lines>

  <ion-item>

    <ion-checkbox formControlName="agreementCheckbox"></ion-checkbox>

  </ion-item>

  <ion-label>I accept the terms of 
    <a (click)="GoToUserAgreementPage()" class="linkText">User Agreement</a>
  </ion-label>
</ion-item>

Upvotes: 0

Phonolog
Phonolog

Reputation: 6511

If you take a look at the Ionic docs that's actually how a checkbox with a label wrapped in an ion-item works.

To get the behaviour you want, don't wrap your checkbox and label in an ion-item, but instead recreate the look of an ion-item. Therefore you could use display: flex or a grid.

Raw draft using display: flex and some inline styles looks something like this:

<div style="align-items: center; display: flex">
    <ion-checkbox style="padding-right: 10px" formControlName="agreementCheckbox"></ion-checkbox>
        <ion-label>I accept the terms of
                <a (click)="GoToUserAgreementPage()" class="linkText">User Agreement</a>
        </ion-label>
</div>

Upvotes: 2

Related Questions