Ionic label click not working

ion-label
ion-button
ion-label width
ion-label multiline
ionic link button
ion-button onclick
ion-label text color
ion-button padding

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

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

Therefore the solution is:

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

Together with:

 .item-cover{
  display:none;
}

angular - 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  Bug Report. Click events behaviour is not as expected, I click on different view and Ionic is firing the click event of different view, It's just IOS based issue working fine on android, Please look on to this thanks.

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>

Ionic label click not working - angular - html, 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  ionic2 ion-tab click not working #6511. elineopsommer opened this issue May 12, 2016 · 2 comments. I have an project with tabs, but the (click)-event doesn't work and if I leave the attribute [root] away (not required because I want to show an action sheet), then the app crashes.

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

Ionic 3 link inside checkbox label - (click) event not fired, When I put a link with a (click) handler inside ion-label then this handler completely ignored. Which means I even cannot use stopPropagation()  I am unable to get an ng-click on an icon. I can see "activated" added to classes but no action. v1.0.0-beta.13, testing in Chrome. I have tried both wrapping it in an and without the wrap.

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;
}

ion-label, The position of the label inside of an item can be inline, fixed, stacked, or floating. Usage. angular javascript react vue. Updating Ionic’s packages; Adding third party libs; Blank App; Directive Not Working; Click Delays; Common mistakes. Forgetting Parentheses on a Decorator; Cordova plugins not working in the browser; Multiple instances of a provider; Common Errors. Cannot resolve all parameters for ‘YourClass’(?).

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;
    }
  }
}

bug: click on ion-label does not focus input · Issue #5378 · ionic , GitHub is home to over 50 million developers working together to host and review code, bug: click on ion-label does not focus input #5378. The use case: The input is part of a form. Clicking the input/search icon opens a modal where the user sees a list of items and can filter them to find the required one. The item is not a string and so the user should not be able to enter text, it must be selected from a list. That's why the input is disabled.

<ion-input> and <ion-icon> click events not firing after upgrade to , Ionic version: (check one with "x") [ ] 1.x (For Ionic 1.x issues, please use kensodemann added the needs: reply label on Aug 20, 2017. a ion-label, button ion-label, [tappable] ion-label { //pointer-events: none; //if i comment this out the clicks work! Who can speak to the reason behind this line, Is it @adamdbradley ? A potential change is

Hyperlinks in Ionic Checkbox Labels, Unfortunately, in Ionic such a hyperlink doesn't work out of the box <ion-item> <​ion-label>Checkbox label <a (click)="moreInfo()">More info. However, when you tap on the hyperlink, the click handler is not invoked. As you may know by now, the big change in Ionic 4 is that all of Ionic’s components are becoming web components. Since web components are a feature of browsers, and not of specific frameworks, this will allow Ionic to work with any framework or no framework at all.

Trigger Click on Input when Label is Clicked, Labels should have "for" attributes that match the ID of the input they are labeling. This means we can snag that attribute and use it in a selector  But again, if the problems listed above are not problems within your app, then the standard img element may be best. Image Dimensions. By providing image dimensions up front, Ionic is able to accurately size up the image's location within the viewport, which helps lazy load only images which are viewable.

Comments
  • Can you share what is your use case and what you are trying to achieve? Ionic is pretty flexible its just nuanced sometimes. So seems like you are going some "edge case" and that's where you may feel this way.
  • When the label is clicked I need to check in the labelClick() method whether a link was clicked (via event.target). If it has been clicked, I should show an explanation for the link as a tooltip. However the tooltip shouldn't show up if any other part of the label is clicked.
  • and so why you want to use ion-input? sorry your context is still fuzzy, what you described can be achieved differently but I see you are using ion-input - does that mean you allow user to input arbitrary text with possibly links?
  • So the label is for a question and the question can have some explainable words, which is why I need to show the tooltips. But the input is for the answer to the question which has to be written in plain text. Basically in my real project changing this ion-label and ion-input will mean huge changes of the html and CSS code which will take days. Everything was fine until this requirement showed up and it's quite dissapointing that this not-that-advanced feature seems like it might be impossible.
  • i see let me try somethign
  • Sorry, never mind, I'm accepting my own answer as the correct one as it was the first one.
  • But I don't think the inputs listener takes over. That would mean that I could attach the listener to the input and the listener function would be triggered when I click on the label. stackblitz.com/edit/ionic-g9uzpx?file=pages/home/home.html
  • I don't understand how Ionic has made the label just un-event-attachable, how is this even possible
  • The cards won't work as they change the layout dramatically
  • OK let me try one more thing:)
  • so you need to keep it as a list?