Ion-select gets triggered on whole view

Ionic Framework ionic-v3
1

Hello everyone,

I’m using a ion-select in one component. When the component gets displayed, I run into a problem. Every tap/click anywhere on the screen triggers the modal(?), which contains the options to select.

I have no idea, what to even search for.

Thanks for your help!

1 Like
2

Can you share some code of what you have/tried? By default select should only open an alert-type UI as seen in the docs.

3 
  <ion-select [(ngModel)]="selectedAgent">
    <ion-option *ngFor="let agent of agents" [value]="agent">{{agent}}</ion-option>
  </ion-select>

It’s really straight-forward code. I even tried it with static options, but that doesn’t seem to be the reason, I found that the item-cover class might have something to do with this.

I currently overwritten this stylesheet:

.item-cover {
  width: 1px !important;
  height: 1px !important;
}

I obviously don’t like this solution.

4

Can you put together a plunk, I’m not following what you are asking

5

If I recall, you can’t have by itself. I think it must be wrapped within an to function correctly.

6

within a what? i have the same issue

7

Sorry, The tag got stripped out. It needs to be in <ion-list> and a <ion-item>
The component cannot be used alone, otherwise, you get that behavior.
See:

1 Like
8

Yes. You’re right. Thank you.

In my use case i ddin’t want to put it in an <ion-item>
i saw a small hack online that worked

.item-cover {
    width: 0;
    height: 0;
}

this also solved my problem

3 Likes
9

thank you so much. I had the same problem too and I solved with your code!

10

put ion-select inside ion-item or div.