How to customize the tab header width?

Question

Hi team,I'm having trouble with setting a responsive tab header as they are overcrowded, but setting the OverflowMode="OverflowMode.Scrollable"  didn't solve this problem, as all the headers are still rendered in the same container.Is there a way to set the maximum number of tab header can be render in the tabs component? Or there is another way to set the tabheader width?Cheers

Alagumeena Kalaiselvan · Answer

Hi Feifan, Greetings from Syncfusion support! We have checked with your reported issue “How to customize the tab header width” and the Tab Scrollable mode enabled when the tab header overflows the container width otherwise the Tab header looks as normal even the overflow mode has been defined. So, you can resolve your issue by defining Tab Width property. We have prepared a sample for your reference. ... Also you can download this sample using the following link Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabComponent-989562460 Kindly try out with shared solution and get back to us, If you need further assistance. Regards Alagumeena.K

Feifan · Answer

Hi Alagumeena,Thank you for your reply. But what I meant to achieve is to set the width of tab item header not just set the width of whole tab and its content.Regards,Feifan

Alagumeena Kalaiselvan · Answer

Hi Feifan,

Thanks for your update!

The Tab item header width can be customized by applying below styles in your sample. Refer the below code block for that

<style>

.e-toolbar .e-toolbar-items .e-toolbar-item {

width: 60px !important;

}

</style>

Please let us know, If you have any complexities.

Regards

Alagumeena.K