Disable clicking on cards


#1

Hi all, pretty new to Ionic. I have an app with a page full of cards. Right now, you are able to click on the cards, i.e. touching it darkens the card, as if it should be touched for some sort of action. However, touching the card does nothing–it’s just meant to be a static display. Is there a good way to disable the ability to touch or click a card?


#2

Hi,
normal ionic cards are not touchable. If you just copy the card source from the cards documentation, there won’t be anything like a touch event.

Did you maybe add some special thing on your own? Please provide some code if the error persists!


#3

Here’s the code I’m currently using:

<div class="card">
  <a class="item item-icon-left">
    <i ng-class="region.game == 'online' ? 'icon ion-checkmark balanced' : 'icon ion-close-circled assertive'"></i>
    Game
  </a>
  <div ng-if="region.gameIncident" class="item item-body">
    <i class="icon ion-alert-circled"></i>
    <p>{{region.gameIncident}}</p>
  </div>
</div>

Is it something about the icon that’s making it touchable?


#4

You have wrapped your icon in an a Tag which results in a link! To prevent your cards from beeing touchable just replace that part with:

  <div class="item item-icon-left">
  <i ng-class="region.game == 'online' ? 'icon ion-checkmark balanced' : 'icon ion-close-circled assertive'"></i>
   Game
 </div>

Does this fix your problem?


#5

Totally. I’m a dope. Thanks saimon!


#6

I have the opposite problem.

I have an app with swipable cards. I’d like to click on a card to trigger a modal but the on-click does not work on cards.

Any idea on how to make cards clickable ?

Thanks

Thierry


#7

It looks like you may want to just do what I did (originally) and place an a tag within the card div. This will make it look right (the card will be clickable), though I’m not sure if it will resolve the on-click issue.


#8

Unfortunatly this does not work.

Has anybody any idea on how to make a card “clickable” ?

Thanks

T