Issue
I am trying to use ion-select in my ionic application, and user iterface='popover' This is my ionic version -5.4.16
Ionic:
Ionic CLI : 5.4.16
Ionic Framework : @ionic/angular 5.0.1
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.3.25
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.2.0
Whenever I change the interface to interface="action-sheet" - it works, so with the action sheet, it is working as expected. But with the popover interface - it doesn't work.
Here is code for the same-
<ion-select
class="language-selector"
[(ngModel)]="selectedLang"
interface="popover"
(ionChange)="onLangChange()">
<ion-select-option
*ngFor="let lang of Languages"
[value]="lang.LanguageCode">{{lang.LanguageName}}
</ion-select-option></ion-select>
I have attached an image below to show a preview of how it is being displayed (Android).
All we see is a greying shadow with no popup or values, I also tried to forcefully add a height (from Inspect in developer tools - Elements tab) to see if that was a problem - But in that case, we just see a blank popup with no values/data. Without using other interfaces like 'Action sheets', how can we fix this bug for 'popover' so that it displays the required entered values?
Solution
The popover interface is limited for some ionic versions.It might still work on certain platforms or versions.
Ionic Version: The "popover" interface style may have been introduced or deprecated in different versions of Ionic. If you're using an older or newer version of Ionic, it could affect the availability and compatibility of the "popover" interface on different devices.
Platform Support: Ionic provides a set of UI components and styles that are designed to work consistently across different platforms (iOS, Android, web, etc.). However, certain interface styles may not be fully supported or have slight differences in behavior on specific platforms or versions. The "popover" interface style might be supported on some platforms but not on others.
Answered By - Abhilash Anand
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.