如何让Ionic popover组件正确显示在触发元素的上方

问题现状 #

现有内联定义的Ionic Popover代码如下：

<!-- Show popover above trigger -->
<ion-button id="button">Demo</ion-button>
<ion-popover trigger="button" side="top">
  <ng-template>
    <ion-content>
      <ion-item>
        <ion-label>
          1. Test
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-label>
          2. Test
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-label>
          3. Test
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-label>
          4. Test
        </ion-label>
      </ion-item>
    </ion-content>
  </ng-template>
</ion-popover>

实际运行效果：

存在的问题：

• Popover内部分列表项超出屏幕可视区域无法显示
• 配置side="top"后仅让popover从触发元素上角位置开始渲染，没有整体出现在触发按钮上方

运行环境 #

Ionic:

   Ionic CLI                     : 6.19.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.1.9
   @angular-devkit/build-angular : 14.0.0
   @angular-devkit/schematics    : 13.3.5
   @angular/cli                  : 14.0.0
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 3.5.1
   @capacitor/android : not installed
   @capacitor/core    : 3.5.1
   @capacitor/ios     : not installed

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.6.0) : 1.5.0

System:

   NodeJS : v16.15.0 (/opt/homebrew/Cellar/node@16/16.15.0/bin/node)
   npm    : 8.5.5
   OS     : macOS Monterey

原因说明 #

side="top"仅声明Popover优先在触发元素上方渲染，默认存在两个逻辑导致不符合预期：

• Popover默认对齐方式为alignment="start"，即Popover左边缘和触发元素左边缘对齐，因此会从触发元素上角位置开始渲染
• Popover自带空间检测自动翻转、高度自适应逻辑，未限制最大高度时，内容过多会向上超出屏幕视口，上方空间不足时还会自动翻转到触发元素下方

实现步骤 #

• 调整Popover对齐方式：给ion-popover标签添加alignment="center"属性，让Popover和触发按钮水平居中对齐，解决边角对齐的偏移问题
• 限制Popover最大高度：通过CSS自定义属性限制Popover最大高度，避免内容过高超出屏幕顶部，可根据实际列表项数量调整高度值
• （可选）强制固定Popover在按钮上方：如果发现Popover因空间检测自动翻转到按钮下方，通过CSS伪元素强制指定Popover定位规则，让其底部始终位于触发按钮上方

完整修改代码 #

HTML 模板 #

<!-- Show popover above trigger -->
<ion-button id="button">Demo</ion-button>
<ion-popover 
  trigger="button" 
  side="top" 
  alignment="center"
  class="fixed-top-popover"
>
  <ng-template>
    <ion-content>
      <ion-item>
        <ion-label>
          1. Test
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-label>
          2. Test
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-label>
          3. Test
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-label>
          4. Test
        </ion-label>
      </ion-item>
    </ion-content>
  </ng-template>
</ion-popover>

对应样式代码（全局/组件样式文件均可） #

.fixed-top-popover {
  /* 限制最大高度，4个列表项的场景下240px足够，可根据需求调整 */
  --max-height: 240px;
  /* Popover和触发按钮之间留8px间距 */
  --offset-y: -8px;
}

/* 强制固定在按钮上方，不需要自动翻转可加这段 */
.fixed-top-popover::part(content) {
  top: auto !important;
  bottom: calc(100% + 8px) !important;
}

内容的提问来源于stack exchange，提问作者Eraldo