Tabs with sticky header

Question

Hi,I am trying to create a tab component with a sticky header inside a splitter component like this:(ignore the tab styling please)The problem we have is that we want to use the built-in overflow property but we cannot get it to work if we set `position: sticky` to the .e-tab-header element.This is the desired outcome. The pop-up menu appears but the tabs are not sticky inside the splitter panel. If we try to make it sticky, the menu doesn't show at all.I also noticed that the popup element is rendered inside the tab element, as opposed to the dialog component that renders inside the <body>.Do you think this behaviour is possible? Let me know if I can provide anything else.Regards,Nicu

Alagumeena Kalaiselvan · Accepted Answer

Hi Nicu,

Thanks for contacting Syncfusion support.

We have checked your reported issue “Tab with sticky header” and you can make the popup-menu as sticky by overriding its position which can be done through CSS. Refer the below code for that.

<style>

.e-tab .e-tab-header {

position: sticky !important;

}

.e-tab .e-toolbar .e-toolbar-pop { // To make sticky popup menu

position: inherit !important;

}

</style>

Also, we have prepared a sample based on your requirement which can get by the below link.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabComponent-1559737376

Kindly check shared solution and get back to us whether it meets your requirement.

Regards

Alagumeena.K

Nicu Comiati · Answer

Hi Alagumeena,Thanks a lot for the example, it is very useful and it will help us a lot :)One last question I have, is it possible to have the menu overlay the splitter content? In the example I can see that when the menu is opened, it pushes the content down.Regards,Nicu

Alagumeena Kalaiselvan · Answer

Hi Nicu, 

Thanks for your update. 

We have validated the reported case “is it possible to have the menu overlay the splitter content” and it is only possible when the Position value as absolute to menu and its parent element have Position 
as relative only. 

Kindly let us know, if you need further assistance. 

Regards 
Alagumeena.K