Hello Richard,
Thanks for waiting patiently.
By default, the FAB’s position is calculated relative to the
target element. Your requirement can be achieved by overwriting the default styles of the FAB as below.
@using Syncfusion.Blazor.Buttons
<div id="target" style="min-height:200px;
position:relative; width:300px; border:1px solid;"></div>
<SfFab Target="#target" Content="Add" CssClass="leftfab" Position="FabPosition.BottomCenter"></SfFab>
<SfFab Target="#target" Content="Subtract" CssClass="rightfab" Position="FabPosition.BottomCenter"></SfFab>
<style>
.leftfab.e-fab.e-btn.e-fab-left.e-fab-center {
/*Clears
the default left value*/
left: unset;
/*Sets
the right value to position the fab at 5px to the left of target's center*/
right: calc(50% + 5px);
}
.rightfab.e-fab.e-btn.e-fab-left.e-fab-center {
/*Overwrites
the default left value to position the fab at 5px to the right of target's
center*/
left: calc(50% + 5px);
}
</style>
|
We have attached the sample for your reference. Check the sample and get back to us if you need further
assistance.
Regards,
Navin V
Attachment:
SyncfusionBlazorApp_e5d95e43.zip