Ion-select popover invisible (off screen)

Ionic Framework
1

my Stencil code is simply using the “gaming” demo on ion-select - Ionic Documentation :

<ion-select
          value={this.selected}
          interface="popover"
          interfaceOptions={{ showBackdrop: false }}
        >
          {this.values.map(v =>
            <ion-select-option value={v}>{v}/</ion-select-option>
          )}
</ion-select>

without any CSS (at this level…) but the <div class="popover-content … has a style="top:-350px … which makes it invisible and inaccessible :

image
image908×687 57.5 KB

…

With interface=“alert” everything is fine (but I don’t want OK/Cancel buttons)

What is wrong ? How to make the popover appear just below (or above) the ?

Thanks !

2

Can you please send the screen shot of Popover (Front End), By seeing the actual image it will be easy to understand.

3

You can achive this by custom css. In Interface option please provide the class name and with that class you can change the property of Popover content.

interfaceOptions= { cssClass: "my-custom-class", translucent: true };

CSS

.my-custom-class .popover-content {
    top: 0px !important;
}

In css edit the property what ever you want. As in my case I have mention the top:0 ;

Note: Custom css will not work in page.scss, you have to define in external css file.

2 Likes
4

it works, thanks, but I still don’t understand why the popover doesn’t appear simply below the <ion-select> as in the example …

5

A popover in ionic (at least the Angular API) likes to receive the $event in order to know where the user clicked. It will the center around this info, as by default a popover is something that should pop close to a user click event location. If not present (that event data), it should present in center.

But not sure if that is happening here. But it could explain some of the magic happening, which also hinders using CSS to change this behavior

And this deals around the Popover API, not the Select_show_as_popover thing

2 Likes
6

Since Ionic 6 you can use reference: "event". In your case, set it within the interfaceOptions attribute.