Syncfusion Javascript Tab - Change Tab button height / Font size

Question

I'm currently trying to build a site using Syncfusion Javascript controls. I've searched everywhere trying to find a way to change the height of the Tab control. I'm trying to change the height of the tab button itself rather than the tab body.

I've tried creating a simple CSS style that changes the font-size, but that was unsuccessful.

<style>
.TabOverride{
    font-size: 5px;

}
</style>

Here I assign the TabOverride css to the control, but it does not work. Setting the itemSize to 8px does not work either.

$("#TabView").ejTab({
            cssClass: "TabOverride",
            showCloseButton: true,
            enableTabScroll: true,
            showRoundedCorner: true,
            width: "100%",
            height: "100%",
            itemSize: "8px"
        });

Here is the support page for the Tab control. https://help.syncfusion.com/js/tab/getting-started

I feel like this must be possible because in the WindowsForm Syncfusion tab there is a property called ItemSize for this purpose. That is why I tried itemSize in the jquery. This should be all CSS right? So it has to be possible.

Answer 1

You can customize the Tab header size using headerSize property. Please refer the code snippet:

$("#TabView").ejTab({
            cssClass: "TabOverride",
            showCloseButton: true,
            enableTabScroll: true,
            showRoundedCorner: true,
            width: "100%",
            height: "100%",
            headerSize: "20px"
        });

.TabOverride ul li a , .TabOverride ul li div{
    font-size: 5px;
     }

Refer the API documentation link for headerSize property: https://help.syncfusion.com/api/js/ejtab#members:headersize

JS Playground sample link: http://jsplayground.syncfusion.com/gh4uq3ff

Regards, Karthikeyan V.