Decrease the header size in mobile mode

[Marcelo Oliveira Santos]

Hi,

In Tab component how to decrease the header size in mobile mode?

Thanks

[Alagumeena Kalaiselvan]

Hi Marcelo, 

Thanks for contacting Syncfusion support. 

We have validated your reported case “How to decrease the header size in mobile mode” and we suggest you to override the below Css classes to reduce the header size of Tab component. Refer the below code for that. 

<SfTab CssClass="tab-adaptive"> 

    <TabItems> 

            ... 

    </TabItems> 

</SfTab> 

 

<style>             

    @@media screen and (max-width: 425px){               // To reduce Tab header size 

        .e-tab.tab-adaptive .e-tab-header, .e-tab.tab-adaptive .e-tab-header .e-toolbar-items, .e-tab.tab-adaptive .e-tab-header .e-toolbar-item:not(.e-separator) { 

            height: 32px !important; 

            min-height: 32px !important; 

        } 

        .e-tab.tab-adaptive .e-tab-header .e-toolbar-item .e-tab-wrap, .e-tab.tab-adaptive .e-tab-header .e-toolbar-item .e-text-wrap, .e-tab.tab-adaptive .e-tab-header .e-toolbar-item.e-active.e-ileft .e-text-wrap { 

            height: 32px; 

        } 

    } 

</style> 

Also, we have prepared a sample based on your requirement which can be downloaded from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabComponent-340593672  

Kindly get back to us, If you need further assistance. 

Regards 

Alagumeena.K  

[Marcelo Oliveira Santos]

Hi Alagumeena.K,

I wanted something like the second figure.

Thank you.

Attachment: tab_74314298.rar

[Alagumeena Kalaiselvan]

Hi Marcelo, 

Thanks for clarifying your requirement. 

We have checked your shared files and you can reduce the height of the vertical Tab header by overriding the few Css class. Refer the below code 

<style> 

    .e-tab.tab-adaptive .e-tab-header .e-toolbar-item:not(.e-separator) { 

        height: 28px !important; 

        min-height: 28px !important; 

    } 

 

    .e-tab.tab-adaptive .e-tab-header .e-toolbar-item .e-tab-wrap, .e-tab.tab-adaptive .e-tab-header .e-toolbar-item.e-active.e-ileft .e-text-wrap { 

        height: 28px !important; 

    } 

 

    .e-tab.tab-adaptive .e-tab-header.e-vertical.e-vertical-left .e-indicator { 

        height: 28px !important; 

    }     

</style> 

Also, we modified the already shared sample for your reference which can get from the following link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabComponent1643668471  

Please try with shared solution and get back to us whether it meets your requirement. 

Regards 

Alagumeena.K 

[Marcelo Oliveira Santos]

Hi Alagumeena Kalaiselvan,

This really helped me a lot.

Thanks.

[Vengatesh Maniraj]

Hi Marcelo, 

 

You are most welcome😊 

 

Please get in touch with us if you need any further assistance. 

 

Regards, 

Vengatesh