CODEWITHSUNDEEP
angularionic-frameworkionic3
GeForce RTX 4090
GeForce RTX 4090

Reputation: 3508

Ionic label click not working

Sometimes I don't understand why Ionic is so inflexible. I have an input and a label stacked on to each other:

<ion-item>
<ion-label stacked (click)="labelClick($event)" [innerHTML]="htmlString"></ion-label>
<ion-input  ></ion-input>

And the labelClick() function just ins't firing no matter what.

Is there something I can do so that clicking on the LABEL fires the function? Without changing the appearance/used components.

Here is a stackblitz with this code demonstrating that it doesn't work: https://stackblitz.com/edit/ionic-5yreac?file=pages%2Fhome%2Fhome.html

Upvotes: 5

Views: 12057

Answers (6)

Jane Kulakovski
Jane Kulakovski

Reputation: 201

The solution is:

/* Ionic 5 */
.item-input ion-label {
   position: absolute;
}

Upvotes: 0

Simon Wicki
Simon Wicki

Reputation: 4059

Bumped into this too with Ionic 4.11.0.

This bit from http://www.damirscorner.com/blog/posts/20190920-HyperlinksInIonicCheckboxLabels.html helped me. It will still receive the full click events for ion-label, but <a> tags get a higher z-index, thus clicked first:

/* Ionic 4 */
.ion-activatable {
  ion-label {
    a {
      position: relative;
      z-index: 10;
    }
  }
}

Upvotes: 0

elltg
elltg

Reputation: 31

I had a similar issue when trying to use ion-items with click handlers in an ion-list in an ion-menu.
My template looks like:

<ion-menu>
  <ion-list>
    <ion-item button (click)="myFunc()">A Clickable Menu Item</ion-item>
  </ion-list>
</ion-menu>

In my instance the offending style was:

.menu-content-open { pointer-events: none; }

My solution and I think a rather simple and flexible solution was to add the following global style:

ion-item[button] {
    pointer-events: initial !important;
}

Upvotes: 1

Sandy.....
Sandy.....

Reputation: 2870

This can be done by two ways as follows:
1] If you want ion-label and ion-input both in in same ion-item:
It has been observed that if ion-item with "ion-label" and "ion-input" together affects labels listeners due to "pointer-events" CSS. By default "pointer-events: none;" get added. Hence if you want click listener to be working then you need to override this style by adding below code:

<ion-item>
   <ion-label class="clickEnableCls" stacked (click)="labelClick($event)" [innerHTML]="htmlString"></ion-label>
   <ion-input  ></ion-input>
</ion-item>

You need to add below class in your respective .scss file:

.clickEnableCls{
   pointer-events: visible !important;
}

2] It is possible by having ion-label and ion-input in two different ion-item as follows:

<ion-item>
   <ion-label stacked (click)="labelClick($event)" [innerHTML]="htmlString"></ion-label>
</ion-item>
<ion-item>
    <ion-input  ></ion-input>
</ion-item>

Upvotes: 3

GeForce RTX 4090
GeForce RTX 4090

Reputation: 3508

After a long time of investigation I found that this style was the problem (can be seen by inspecting the ion-label):

enter image description here

Therefore the solution is:

.item-input ion-label{
  pointer-events:all!important;
}

Together with:

 .item-cover{
  display:none;
}

Upvotes: 10

Sergey Rudenko
Sergey Rudenko

Reputation: 9235

So in your case the issue is that ion-input is "taking over" with its input listener and your link related (click) listener is no longer "heard".

I would try using this approach: use ionic cards (or grid) or separare divs to clearly divide user input area and your question text / string.

Here is the stackblitz: https://stackblitz.com/edit/ionic-9gz5ok

Upvotes: 1

Related Questions