I want to implement a Fab button in the middle of ion-card, is it any way to do this?
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
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>
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
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?
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