1. Home
  2. Forum
  3. Blazor
  4. Floating Button

Floating Button

Dear Support,
Is it possible to add a floating button which will always be located at the bottom right side of the browser, even if you scroll up or down?
Similar to the screen shot below:



5 Replies 1 reply marked as answer
MV Madhan Venkateshan Syncfusion Team June 18, 2020 09:29 AM UTC

Hi Stephanie Koronidou, 
 
Good day to you. 
 
You can use fixed position for the button to achieve your requirement. Please refer the below code snippets. 
 
Index.razor 
<div style="height: 1000px"></div> 
<SfButton CssClass="floating-button" Content="Floating Button"></SfButton> 
 
<style> 
    .floating-button { 
        position: fixed; 
        bottom: 0; 
        right: 0; 
    } 
</style> 
 
Regards, 
Madhan V 


SK Stephanie Koronidou June 18, 2020 09:53 AM UTC

Hello, 

Thanks for the reply.
Unfortunately, This does not work for me.

Basically, I have an SfGrid and for that grid I need to have a floating button that should always be at the bottom of the browser viewport.



MV Madhan Venkateshan Syncfusion Team June 19, 2020 02:28 PM UTC

Hi Stephanie Koronidou, 
 
Good day to you. 
 
We have prepared a sample of scrollable grid with floating button at the bottom of the grid, please refer the below sample link. 
 
 
Regards, 
 Madhan V

SK Stephanie Koronidou June 23, 2020 07:27 AM UTC

Good Morning,
Thank you for the reply.
In my case the grid does not have a static height. It is expandable as per the number of rows. 
There is no scroll in the grid, the only scroll there is, is at the page itself.
Can you please provide a sample that applies to my case?


SD Saranya Dhayalan Syncfusion Team June 25, 2020 07:22 AM UTC

Hi Stephanie, 
 
We have checked your reported query, you can achieve to remove the height property in grid. Button positioned in proper place. Please find the below code snippet: 
 
@using Syncfusion.Blazor.Grids 
<div class="col-lg-12 control-section"> 
    <div class="content-wrapper"> 
        <div class="row"> 
            <SfGrid DataSource="@GridData" Width="auto"> 
                <GridColumns> 
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn> 
                </GridColumns> 
            </SfGrid> 
            <SfButton CssClass="floating-button e-small e-round" IsPrimary="true" IconCss="e-btn-sb-icons e-add-icon"></SfButton> 
        </div> 
    </div> 
</div> 
 
@code{ 
    public List<OrdersDetails> GridData { get; set; } 
    protected override void OnInitialized() 
    { 
        GridData = OrdersDetails.GetAllRecords(); 
    } 
} 
 
<style> 
    .floating-button { 
        position: absolute; 
        bottom: 19px; 
        right: 29px; 
    } 
 
    @@font-face { 
        font-family: 'button-icons'; 
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'); 
        font-weight: normal; 
        font-style: normal; 
    } 
    .e-btn-sb-icons { 
        font-family: 'button-icons'; 
        line-height: 1; 
        font-style: normal; 
        font-weight: normal; 
        font-variant: normal; 
        text-transform: none; 
        -webkit-font-smoothing: antialiased; 
        -moz-osx-font-smoothing: grayscale; 
    } 
    .e-add-icon::before { 
        content: '\e70a'; 
    } 
</style> 
 
Please check the above code snippet and get back to us if you need further assistance on this. 
 
Regards, 
Saranya D 


Marked as answer
Loader.
Up arrow icon