FabButton in the middle of something?

Ionic Framework ionic-v3
1

I want to implement a Fab button in the middle of ion-card, is it any way to do this?

2

This doesn’t seem very descriptive but you can easily overwrite the fab button position using the top, right, bottom or left css rules.

Example:

.my-ion-fab {
top: 20% !important;
}

Just make sure to apply that class to your ion-fab

3

you can simply apply the center attribute on the fab btn

exemple:

<ion-fab bottom center >
    <button ion-fab fab-fixed>
      <ion-icon name="add" is-active="false"></ion-icon>
    </button>
  </ion-fab>
4

it will move it to the bottom of the page and i want to move fab in the middle of ion-card

and making my own css styling wont work when someone turn the screen in landscape mode

5

I don’t understand this to be honest. If you have the ion-fab nested within the ion-card then it will stay contained within that card. If you set its position to 5% left and 5% top, rotating the device would make it resize correctly. Can you provide a better example? Maybe a codepen demonstrating it?

6

Here comes the code:

 <ion-card>
    <ion-card-content>
      <ion-fab center middle>
        <button ion-fab [color]="apple'"><ion-icon [name]="play'"></ion-icon></button>
      </ion-fab>
      <canvas #doughnutCanvas></canvas>
    </ion-card-content>
  </ion-card>

And FAB is getting assigned according to window size during the portrait mode, not ion-card. Using this css:

    ion-fab[middle] {
      top: 30%;
    }
    ion-fab[center] {
      left: 50%;
    }

During the landscape mode its position is very top of the screen

1 Like