Tabs with header position left scrollable mode

[Mihai Calugar]

Hello. I'm using the tabs component with the property HeaderPlacement set to HeaderPosition.Left. While using this I would also like to obtain the overflow mode scrollable to work. Meaning the tabs if they exceed the height of the container to be displayed with the built in overflow mode scrollable of the tabs component. Is there a way you can achieve this ? Or usually the overflow modes are applied just for the tabs which are placed horizontally?

Looking forward to hearing from you.

Thanks,

Mihai

[Alagumeena Kalaiselvan]

Hi Mihai, 

Greetings from Syncfusion support. 

We have validated your reported case “Tab with header position left scrollable mode” and Tab Overflow Modes not only support the horizontal Tabs and it also supports vertical Tabs which have header position as Left/Right. Meanwhile, the scrollable mode for vertical Tab only shows when the height of Tab container exceeds. So, you can define the preferred height to Tab component for your scenario. We have prepared a sample for your reference. 

<SfTab OverflowMode="OverflowMode.Scrollable" Height="250px" HeaderPlacement="HeaderPosition.Left"> 

    <TabItems> 

        <TabItem Content="HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language."> 

            <ChildContent> 

                <TabHeader Text="HTML"></TabHeader> 

            </ChildContent> 

        </TabItem> 

       ... 

    </TabItems> 

</SfTab> 

  

Also, the above sample can be downloaded from the following link. 

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

Online Demo Link: https://blazor.syncfusion.com/demos/tabs/responsive-modes?theme=bootstrap4 

Please try out with shared sample and let us know, if the solution helps. 

Regards 

Alagumeena.K