I have a FAB that, when clicked, gives a couple of options to click on. However, when you click the ‘+’ icon on the button, and it switches to the ‘×’ symbol to close the list of options, the second ‘×’ icon drops down by a few pixels so it isn’t placed centrally within the circular button any more. I’m not sure if this is a bug or something within my scss, but I can’t seem to get rid of it by deleting bits of the css.
For reference, here is my HTML:
<ion-fab right bottom #fab>
<button ion-fab>
<ion-icon name="add"></ion-icon>
</button>
<ion-fab-list side="top" #fabList>
<div *ngIf="fabList.classList.contains('fab-list-active')" class="backdrop" (click)="fab.close();"></div>
<button ion-fab (click)="goToAddChallenge()"><ion-icon color="danger" name="flag"></ion-icon><ion-label tappable (click)="goToAddChallenge()">New challenge</ion-label></button>
<button ion-fab (click)="goToAddExercise()"><ion-icon color="danger" name="pie"></ion-icon><ion-label tappable (click)="goToAddExercise()">New exercise</ion-label></button>
</ion-fab-list>
</ion-fab>
and here are the styles:
button[ion-fab] {
overflow: visible;
position: relative;
ion-label {
position: absolute;
top: -8px;
right: 40px;
color: white;
background-color: #002C31;
box-shadow: 0 3px 4px #6b6b6b;
line-height: 24px;
padding: 4px 8px;
border-radius: 4px;
}
}
.fab {
contain: layout;
}
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.6);
}
button.fab.fab-close-active {
z-index: 1;
}
Edit: I don’t get this issue at all when I use ionic serve
, only when I emulate it on my Android device.