Ionic 4 ion-select popover position

user_2081043 0
Viewed 4033

I am using a ion-select with attribute interface="popover". The popover is opening up below the select which makes the popover very small.

I figured out that if there's 10 or more items in the ion-select, it open downwards, while there's less than 10 items it calculates which way to open, depending on where the most space available is vertically from the select input.

How can I set the popover to open above the select?

Screenshot of Source opening below select (wrong way):

enter image description here

Screenshot of Method of Contact opening above select (correct way):

enter image description here

ionic4 ionic-framework
2 Answers

When interface="popover" is like that, Ionic 4 uses ion-popover component here. As version Ionic 4.x, there is no built-in things to position this window. So you need to override the core behavior. To do so, please add the snippet to your page's CSS file.

.popover-wrapper .popover-content{
    position: relative !important;
    margin: 0 auto !important;
    left: auto !important;
    top: auto !important;
}
user_38674220

you need to specify the click event and use it inside presentPopover method

template:

<your-element (click)="presentPopover($event)"></your-element>

component:

async presentPopover(event: any) {
    const popover = await this.popoverController.create({
        component: PopoverComponent,
        event
    });

    return await popover.present();
}
user_92964790
Related