css - 为什么 ion-fab-button 不能固定在 ionic 4 popover 内？

Question

我正在开发一个 ionic 4 应用程序，并且创建了一个弹出框。在此弹出框内，我想使用ion-fub-button必须固定在弹出框右上角的 a 。

我写的 HTML 代码是这样的：

<ion-content>
   <ion-fab vertical="top" horizontal="end" slot="fixed">
        <ion-fab-button (click)="getStats()">
            <ion-icon id="closeBTN" name="stats" color="light">
            </ion-icon>
        </ion-fab-button>
   </ion-fab>


   <div>
      ......
   </div>
</ion-content>

如您所见，我希望 ion-fab-button 应该在弹出框的右上角保持 FIXED 状态，但实际上它并没有保持固定状态，而是随着其余内容滚动。谁能告诉我为什么以及如何解决它？

我还尝试将按钮插入到 ion-header 中，但也尝试将ion-header滚动条与弹出框的其余部分一起插入。而且我也尝试position:fixed对这个按钮使用 css，但它不起作用。

有人可以帮助我吗？

标签： cssangularionic-frameworkpositionpopover

Answer 1

这适用于我在 25-02-2021 使用 Ionic 5

html

 <div class="fixed">

        <ion-fab vertical="top" horizontal="end" edge slot="fixed">
          <ion-fab-button size="small">
            <ion-icon name="camera"></ion-icon>
          </ion-fab-button>
        </ion-fab>

      </div>

css

.fixed {
    position: fixed;
    bottom: 30px;
    right: 0;
}