1. Feedback
  2. React
  3. 45909

Welcome to the React feedback portal. We’re happy you’re here! If you have feedback on how to improve the React, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Using headerTemplate seems to cause header layout issues

If I use headerTemplate on tab headers the control seems to have issues with calculating the sizing of the headers initially - the line that goes under the initial active tab is too long and the header is not set to scrollable even if it should be.

I took one of your simple demos and forked it to just add in a simple headerTemplate on the tabs that just returns text and that was enough to demonstrate the issue (I constricted the width of the container to help show the scrollable issue with a minimal number of tabs).

https://stackblitz.com/edit/react-d4o4er-jsjcgh?file=index.js

Resizing the browser window which no doubt triggers some resize handler on the control causes it to fix the issues, so it's just on that initial display.

I've added an attachment showing how the control displays initially (no scroll on the header, line under intiail tab extends too far to the right) and then how it shows after doing a small browser window resize which triggers it to lay things out correctly.