0

I have three buttons inside ion-fab elements that get cut off at various levels after I scroll down on the app.

Here is the HTML example of one of the 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>

The parent element to this is the ion-content tag. And here is any CSS associated with these buttons:

.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;
        }
    }

Only after I click somewhere else on the app does it go back to normal. I've attached an image to show that the buttons get cut off at different levels, and it doesn't matter where I scroll to on the app (it's not deep). The top is, of course, what they should look like, the bottom is how cut off they can get. Anyone have any ideas on why this is happening?

  • Did you find any solution for this ?? even i am facing same issue – Kumar Jul 02 '20 at 11:50
  • @Kumar sorry for late response. I ended up just fixing it with manual CSS. hope you are able to find solution for yourself. –  Jul 21 '20 at 16:31

0 Answers0