FabButton zindex problem inside card

Ionic Framework ionic-v3
1

Hello guys,

someone know how the buttons of ion-fab-list, when are in card, don’t show all? I already try to use z-index: 9999, but dont work…

Here is my item:

   <ion-item detail-none  color="none" class="buttonCard">
    <ion-thumbnail item-start item-left>
      <img src="assets/imgs/logo-parceiro.jpg" />
    </ion-thumbnail>
    <div class="espaco-fab">
      <p class="titulo-estabelecimento">
       Thiago Lanches Aqui
     </p>
     <p class="descricao-estabelecimento">Ruax, Cohab, Perto do Bar .</p>
     <div class="restaurante-infos">
      <ion-icon name="ios-cash-outline" align-items-end class="icon-relogio"></ion-icon> R$2,50
    </div>
  </div>


  <ion-fab class="fab-space" item-end right edge>
    <button ion-fab mini><ion-icon name="call"></ion-icon></button>
    <div class="test">
    <ion-fab-list side="bottom">
      <button (click)="ligar(0+tel['telefone'])" ion-fab>
        <ion-icon name="call"></ion-icon>
      </button>     
    </ion-fab-list>
  </div>
  </ion-fab>

</ion-item>

lol
lol.png1080×710 101 KB

2

Someone? I cant find a solution. Maybe is a bug?

3

I have the same problem, does anyone have the solution?

I just came up with the solution, you just have to give the visible property to the card when it’s overflow

<ion-card style = "overflow: visible;">

1 Like
5

this worked. thank you :slight_smile: