[SOLVED] Fab buttons Horizontal aligned

Ionic Framework ionic-v3
1

Hi guys.
I would ask you all if there is a way, without CSS (only with ionic class) to align horizontally two Fab buttons.
I want to create a fullscreen map without footer and header so I can put the fab buttons on the map itself and go to prev and next slide with fab buttons.

I notice that with ion-fab-list i can have the buttons, but they can’t exist without another button to click and let them appear. I’ve searched a way to create a list and open it programmatically without success.
Thank you all

<ion-fab bottom left>
        <button (click)="goPrevSlide()" color="orange" ion-fab><ion-icon name="arrow-dropleft"></ion-icon></button><b
        <button (click)="goNextSlide()" color="secondary" ion-fab><ion-icon name="arrow-dropright"></ion-icon </button>
</ion-fab>

image
IMG_1975.PNG750×1334 236 KB

2

I’ve found the solution, that was really simple (Why I didn’t think earlier :smiley: ).
I put the fab buttons inside a table row:

<ion-fab bottom left>
      <ion-row>
        <ion-col>
          <button (click)="goPrevSlide()" color="orange" ion-fab mini><ion-icon name="arrow-dropleft"></ion-icon></button>
        </ion-col>
        <ion-col>
          <button (click)="goNextSlide()" color="secondary" ion-fab mini><ion-icon name="arrow-dropright"></ion-icon></button>
        </ion-col>
      </ion-row>
</ion-fab>

and the result is:

image

5 Likes
3

Just another way without so many lines, in scss file:

ion-fab {
  .fab { display: inline-block !important}
}
3 Likes