Tab header scrolling

[Kunal]

I am currently facing with the SfTab control in my Blazor application. Specifically, I am trying to find a way to keep the headers of the tab fixed while the user scrolls through the content.

Currently, when a user scrolls through the tab content, the headers scroll along with the content, making it difficult for the user to know which tab they are currently viewing. I would like to find a way to keep the headers fixed at the top of the screen, similar to how the headers of a traditional web page would remain fixed as the user scrolls.

[Ravikumar Venkatesan]

Hi Kunal,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/syncfusion_blazor_tab_fixed_header-129749331

You can keep the Tab header fixed at the top of the screen with the help of the CSS style shown below.

[Index..razor]

<SfTab CssClass="sticky-header">

</SfTab>

 

<style>

    .sticky-header.e-tab .e-tab-header {

background: white;

position: sticky;

top: 0;

z-index: 1000;

    }

</style>

Regards,

Ravikumar Venkatesan

[Kunal]

It worked, Thank you

[Mugilraj Govindarajan]

Hi Kunal,

 

We are happy that our solution helped you. Let us know if you need any further assistance on this.

Regards,
Mugilraj G