We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Tab issues

Thread ID:





147013 Aug 28,2019 02:15 PM UTC Aug 30,2019 10:03 AM UTC Angular - EJ 2 3
Tags: Tab
Asked On August 28, 2019 02:15 PM UTC


I need a help to fix this issue in the attached screen shot (demo), its a popup having a field name Template & My Questions it should be  centre aligned and First Letter should be in Caps remaining should be in small, Kindly find the attached screenshot for your reference (mockup)



Attachment: screenshot_8723b0e5.zip

Vinitha Devi Murugan [Syncfusion]
Replied On August 29, 2019 02:06 PM UTC

Hi Sunithra, 

Syncfusion greetings. 

We had prepared the sample based on your requirement which is available from below link: 

Kindly check the sample and revert us, if you need any further assistance on this. 


Replied On August 29, 2019 02:33 PM UTC


Thanks for your reply regarding capital letters & small letter, but regarding tab centre alignment issue we couldn't get the solution from your side,So again i mark and send the sample mock which i need exact solution with sample code. 

Attachment: demoProjectdemoScreenshot_438b2a20.zip

Vengatesh Maniraj [Syncfusion]
Replied On August 30, 2019 10:03 AM UTC

Thanks for the update. 

We have covered the tab centre alignment also in below provided sample. We can achieve this case by overriding tab css classes like below code snippets. 

Sample: https://stackblitz.com/edit/angular-ghgpdk-ljwpqj?file=app.component.css                                                                                                                                                                                  

#1: Capital & small letter 
.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
text-transform: capitalize !important;

#2: Tab centre alignment 
#tab_default .e-tab-header .e-toolbar-items {
width: inherit;
#tab_default .e-tab-header .e-toolbar-item:not(.e-separator){
width: calc(100%/3);
#tab_default .e-tab-header .e-toolbar-item .e-tab-wrap {
text-align: center;
Output like below, 
Kindly check the sample and revert us, if you need any further assistance on this. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon