Ion-select doesn't scroll in Ionic 3

Question

This select contains the list of all countries in register form. The point is that the ion-content in the form page is scrollable but select it self is not scrolling. Here is the code:

 <ion-item>
       <ion-select interface="action-sheet" class="select" placeholder="Country">
          <ion-option ngDefaultControl [value]='country.name' *ngFor="let country of countries">{{country.name}}
          </ion-option>
        </ion-select>
       </ion-item>

Why select scroll is not working?

Answer 1

This is a known issue, you can track at https://github.com/ionic-team/ionic/issues/17311#issuecomment-460829890

Ionic have provided a workaround by setting following css in global.scss

.action-sheet-group {
    overflow: auto !important;
}

Hope that helps

Answer 2

I had this problem in ionic 4 using interface=popover. The solution was to make a global css class:

.my-select-scrollable .popover-viewport {
  overflow: scroll;
}

then add this attribute to the ion-select

[interfaceOptions]="{cssClass: 'm-select-scrollable'}"

You could also avoid the attribute with this in the global css file:

ion-select {
  overflow: scroll !important;
}