Ionic 4 离子选择弹出框位置答案

【问题标题】：Ionic 4 ion-select popover positionIonic 4 离子选择弹出框位置
【发布时间】：2020-02-21 14:59:27
【问题描述】：

我正在使用带有interface="popover" 属性的ion-select。弹出框在select 下方打开，这使得弹出框非常小。

我发现如果ion-select 中有 10 个或更多项目，它会向下打开，而少于 10 个项目它会计算打开的方式，这取决于从select 垂直的可用空间最多的位置输入。

如何设置弹出框在select上方打开？

来源在select下方打开的屏幕截图（错误的方式）：

联系方式在select上方打开的截图（正确方式）：

【问题讨论】：

你能展示你的离子选择代码吗？

标签： ionic-framework ionic4

【解决方案1】：

你需要指定点击事件并在presentPopover方法中使用

模板：

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

组件：

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

    return await popover.present();
}

【讨论】：

【解决方案2】：

当interface="popover" 是这样时，Ionic 4 在这里使用ion-popover 组件。作为 Ionic 4.x 版本，没有内置的东西来定位这个窗口。所以你需要覆盖核心行为。为此，请将 sn-p 添加到页面的 CSS 文件中。

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

【讨论】：