0

我在 ion-fab 元素中有三个按钮，在我向下滚动应用程序后，它们会在不同级别被切断。

这是其中之一的 HTML 示例ion-fab button：

<ion-grid *ngIf="parkDetails">
 <ion-row class="button-row">
   <ion-fab>
     <button ion-fab color="primary" (click)="showAlerts()" >
         <ion-icon class="warning" name="warning"></ion-icon>
     </button>
     <ion-badge class="alert-count alert-color" color="danger" *ngIf="parkDetails.park_alerts.length > 0">{{parkDetails.park_alerts.length}}</ion-badge>
   </ion-fab>
 </ion-row>
</ion-grid>

这个的父元素是ion-content标签。以下是与这些按钮相关的任何 CSS：

.button-row {
        height: auto;
        justify-content: space-evenly;
        overflow: visible;
        ion-icon {
            font-size: 2em;
            &[class*="custom-heart"] {
                mask-image: url('an svg file');
            }
        }
        ion-fab {
            position: relative;
            margin: 0.5rem;
            overflow: visible;
        }
        .alert-count {
            top: 0;
            right: -5px;
            position: absolute;
            z-index: 999;
        }
    }

只有在我单击应用程序上的其他位置后，它才会恢复正常。我附上了一张图片，以显示按钮在不同级别被切断，我在应用程序上滚动到哪里都没有关系（它并不深）。当然，顶部是它们应该是什么样子，底部是它们可以被切断的程度。有人对为什么会这样有任何想法吗？

4

0 回答 0