Tab issues

[sunithra]

Hi

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)

Regards,

Sunithra.C

Attachment: screenshot_8723b0e5.zip

[Vinitha Devi Murugan]

Hi Sunithra, 

Syncfusion greetings. 

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

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

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

Regards, 

Vinitha 

[sunithra]

Hi,

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]

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. 

 

Regards, 

Vengatesh