SfTab clipping TabHeader Text

[Ben Junior]

In the SfTab the  HeaderPlacement="HeaderPosition.Left" but the "TabHeader Text" doesn't show the entire text. How can I increase the width ?

<div style="width: calc(100vw - 2rem); height: calc(100vh - 5rem); margin: 0 10px;">

    <SfTab EnablePersistence="true" Height="100%" Width="100%" CssClass="default-tab e-fill" HeaderPlacement="HeaderPosition.Left">

        <TabItems>

            <TabItem>

                <ChildContent>

                    <TabHeader Text="Home Page Layout" IconCss="e-printlayout_b"></TabHeader>

                </ChildContent>

                <ContentTemplate>

                </ContentTemplate>

            </TabItem>

            <TabItem>

                <ChildContent>

                    <TabHeader Text="Header" IconCss="e-printlayout_b"></TabHeader>

                </ChildContent>

                <ContentTemplate>

                </ContentTemplate>

            </TabItem>

            <TabItem>

                <ChildContent>

                    <TabHeader Text="Panel on Booking Page" IconCss="e-increaseindent"></TabHeader>

                </ChildContent>

                <ContentTemplate>

                </ContentTemplate>

            </TabItem>

        </TabItems>

    </SfTab>

</div>

Attachment: TabHeaderNotLongEnough_1ffc01d3.zip

[Balasubramanian Sattanathan]

Hi Ben, 

Greetings from Syncfusion Support. 

We have analyzed your reported problem at our end and let you know that we can increase the width of tab items by making use of the below CSS. We have prepared a sample for your reference which can be available from the below link. 

https://www.syncfusion.com/downloads/support/forum/165909/ze/Tab_sample-793157379.zip 

.e-toolbar-items { 

    width: 250px !important; 

} 

Kindly try the above solution and let us know if you need further assistance. 

Regards, 

Balasubramanian S