bug/feat: ion-select with more than 5 items lacks visual indicator on Material Theme

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

An ion-select with more than 5 items has no visual indicator that the selection area is scrollable, but only for the Material Theme. The iOS theme shows half of the 6th item, which serves as a visual indicator that the whole area is scrollable.

The reason for this is simple:

.alert-radio-group.sc-ion-alert-ios, .alert-checkbox-group.sc-ion-alert-ios {
  max-height: 240px;
}
.alert-tappable.sc-ion-alert-ios {
    height: 44px;
}

240px / 44px = 5,45 items to show.

.alert-radio-group.sc-ion-alert-md, .alert-checkbox-group.sc-ion-alert-md {
    max-height: 240px;
}

.alert-tappable.sc-ion-alert-md {
    height: 48px;
}

240px / 48px = exactly 5 items.

Solution:

.alert-radio-group.sc-ion-alert-md, .alert-checkbox-group.sc-ion-alert-md {
    max-height: 264px;
}

Because 264px / 48px = 5.5 items.

Sure, I can override this in app.css, but I think it makes sense as a good default for all ionic apps, since it is confusing for users.

Expected Behavior

Show 5.5 items in Material Theme

Steps to Reproduce

<ion-item>
          <ion-label>Music</ion-label>
          <ion-select value="03">
            <ion-select-option value="01">Alice in Chains</ion-select-option>
            <ion-select-option value="02">Green Day</ion-select-option>
            <ion-select-option value="03">Nirvana</ion-select-option>
            <ion-select-option value="04">Pearl Jam</ion-select-option>
            <ion-select-option value="05">Smashing Pumpkins</ion-select-option>
            <ion-select-option value="06">Soundgarden</ion-select-option>
            <ion-select-option value="07">Stone Temple Pilots</ion-select-option>
          </ion-select>
 </ion-item>

Or see here and toggle between themes: https://ionicframework.com/docs/api/select

Code Reproduction URL

https://ionicframework.com/docs/api/select

Ionic Info

Package.json:

“@ionic/core”: “5.6.12”

Additional Information

[amandaejohnston]

Hi @cmaas, thank you very much for the report and deep dive. I’ve resolved this via https://github.com/ionic-team/ionic-framework/pull/23976 and the fix will be available in a future release of Ionic.

I decided to go with your suggestion to just increase the list height for now, and I also made a separate issue for the mismatch with the MD spec: https://github.com/ionic-team/ionic-framework/issues/23977

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.