Position 2 buttons next to each other

[Ditchford]

Hello

With a floating action button, if I have 2 buttons at the same location (say FabPosition.BottomCenter)

relative to a target data grid one button overlays the other. Is it possible to have 2 buttons next to each other, i.e. one button offset by a few px?

Many thanks

[Navin Vinayagam]

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