How to change height of tab header

[Huifei Rao]

I have an angular tab control shown below. How can I change the height of the tab header? Thanks

 

                       <ejs-tab>

                                <e-tabitems>
                                    <e-tabitem >
                                        <ng-template #headerText>
                                            <div> Tab1 </div>
                                        </ng-template>
                                        <ng-template #content>
                                            
                                        </ng-template>
                                    </e-tabitem>
                                        
                                    <e-tabitem>
                                        <ng-template #headerText>
                                            <div> Tab2 </div>
                                        </ng-template>
                                        <ng-template #content>
                                            
                                        </ng-template>
                                    </e-tabitem>
                                </e-tabitems>
                            </ejs-tab>

[Hareesh Balasubramanian]

Hi Huifei, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared query using CSS, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-cflurp?file=app.component.html  

UG link: https://ej2.syncfusion.com/angular/documentation/tab/style/#customizing-tabs-header 

.e-tab .e-tab-header { 

  background: #badfba !important; 

  height: 50px !important; 

} 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Hareesh