1. Home
  2. Forum
  3. Blazor
  4. How to change tab position

How to change tab position

I have an sftab with sub tab control in my application.I would like to know how to make sub tab position as left (vertical).please check attached file and advise how to do this.

Note:-

Please apply css for all tab which is given in attached file(shape should be same as in attached file)


Attachment: BOM_46524d45.zip




7 Replies
KI KINS July 16, 2021 03:59 PM UTC

Is it possible to get answers today??


SK Satheesh Kumar Balasubramanian Syncfusion Team July 17, 2021 12:37 PM UTC

Hi Hassan,

Thanks for using Syncfusion Products.

We have validated your reported query "I would like to know how to make sub tab position as left" and suggest you to use HeaderPlacement property to achieve your requirement. For the same we have prepared a sample for your reference which can be downloaded from the following link.


Index.razor:   
<SfTab>
    <TabItems>
        <TabItem>
            <ContentTemplate>
                <SfTab HeaderPlacement="HeaderPosition.Left">
                 .......................................................
                </SfTab>
            </ContentTemplate>
            <ChildContent>
                <TabHeader Text="USA"></TabHeader>
            </ChildContent>
        </TabItem>
    </TabItems>
</SfTab>

Kindly try the above sample and let us know if this meets your requirement. Also, we are currently preparing the customization sample based on your shared details. We will provide further details on July 20, 2021.

Regards,
Satheesh Kumar B


SK Satheesh Kumar Balasubramanian Syncfusion Team July 20, 2021 10:15 AM UTC

Hi Hassan, 
  
Thanks for your patience. 
  
We have validated your attached image and prepared the below sample using material theme to meet your requirement which can be downloaded from the following link. 

  
Index.razor:    
<SfTab CssClass="parent-tab-class" Height="500px"> 
    <TabItems> 
        <TabItem> 
            <ContentTemplate> 
                <SfTab HeaderPlacement="HeaderPosition.Left" CssClass="first-nested-tab-class"> 
                ................................................................ 
                </SfTab> 
            </ContentTemplate> 
            <ChildContent> 
                <TabHeader Text="USA"></TabHeader> 
            </ChildContent> 
        </TabItem> 
        <TabItem> 
            <ContentTemplate> 
                <SfTab HeaderPlacement="HeaderPosition.Left" CssClass="second-nested-tab-class"> 
                ............................................... 
                </SfTab> 
            </ContentTemplate> 
            <ChildContent> 
                <TabHeader Text="France"></TabHeader> 
            </ChildContent> 
        </TabItem> 
        <TabItem> 
            <ContentTemplate> 
                <SfTab HeaderPlacement="HeaderPosition.Left" CssClass="third-nested-tab-class"> 
                 ............................................... 
                </SfTab> 
            </ContentTemplate> 
            <ChildContent> 
                <TabHeader Text="Australia"></TabHeader> 
            </ChildContent> 
        </TabItem> 
    </TabItems> 
</SfTab> 
  
<style> 
    .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-toolbar-item { 
        height: 0; 
        width: 150px; 
        border-left: 33px solid transparent; 
        border-right: 33px solid transparent; 
        margin-top: -6px; 
    } 
    .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active { 
        border-bottom: 40px solid black; 
    } 
    .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-toolbar-item { 
        border-bottom: 40px solid whitesmoke; 
    } 
    .e-tab.parent-tab-class .e-tab-header .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child { 
        margin-top: -6px; 
    } 
    .e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-ileft .e-tab-wrap, 
    .e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-iright .e-tab-wrap { 
        height: 76px; 
        padding-top: 42px; 
        color: black; 
    } 
    .e-tab.parent-tab-class .e-tab-header .e-toolbar-item .e-tab-wrap { 
        padding-left: 0; 
        padding-right: 0; 
        text-align: center; 
    } 
    .e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-ileft.e-active .e-tab-text, 
    .e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-iright.e-active .e-tab-text { 
        color: white; 
    } 
    .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-indicator { 
        left: 0 !important; 
        right: 0 !important; 
        background: black; 
    } 
    .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) { 
        padding-left: 100px; 
    } 
    .e-tab.first-nested-tab-class .e-tab-header .e-indicator, 
    .e-tab.second-nested-tab-class .e-tab-header .e-indicator, 
    .e-tab.third-nested-tab-class .e-tab-header .e-indicator { 
        top: 10px !important; 
        bottom: 0 !important; 
        height: 130px !important; 
        background: black; 
    } 
    .e-tab.first-nested-tab-class .e-tab-header .e-toolbar-items, 
    .e-tab.second-nested-tab-class .e-tab-header .e-toolbar-items, 
    .e-tab.third-nested-tab-class .e-tab-header .e-toolbar-items { 
        padding-right: 20px; 
    } 
    .e-tab.first-nested-tab-class.e-vertical-tab .e-content .e-item.e-active, 
    .e-tab.second-nested-tab-class.e-vertical-tab .e-content .e-item.e-active, 
    .e-tab.third-nested-tab-class.e-vertical-tab .e-content .e-item.e-active { 
        padding-left: 20px; 
    } 
    .e-tab.first-nested-tab-class .e-tab-header .e-toolbar-item.e-ileft.e-active .e-tab-text, 
    .e-tab.first-nested-tab-class .e-tab-header .e-toolbar-item.e-iright.e-active .e-tab-text, 
    .e-tab.second-nested-tab-class .e-tab-header .e-toolbar-item.e-ileft.e-active .e-tab-text, 
    .e-tab.second-nested-tab-class .e-tab-header .e-toolbar-item.e-iright.e-active .e-tab-text, 
    .e-tab.third-nested-tab-class .e-tab-header .e-toolbar-item.e-ileft.e-active .e-tab-text, 
    .e-tab.third-nested-tab-class .e-tab-header .e-toolbar-item.e-iright.e-active .e-tab-text { 
        color: black; 
    } 
</style> 
  
Kindly try the above sample and let us know if this meets your requirement. 
  
Regards, 
Satheesh Kumar B 



KI KINS July 23, 2021 03:59 AM UTC

Really it's great


NR Nevitha Ravi Syncfusion Team July 26, 2021 03:51 AM UTC

Hi Hassan, 

Thanks for your update. Please get back to us for further assistance. 

Regards, 
Nevitha 


KI KINS August 10, 2021 01:38 PM UTC

please check attached file for tab.

Please help me how to design such tab 



Attachment: Size_Breakup_Tabs1_2e98e455.zip


NR Nevitha Ravi Syncfusion Team August 11, 2021 09:16 AM UTC

Hi Ahmed, 

Thanks for your update. 

We have achieved your requirement by using the below CSS, please refer to the following sample. 

 
<style> 
    .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-toolbar-item { 
        width: 150px; 
        transform: skewX( 30deg ); 
        margin:4px; 
    } 
    .e-tab.parent-tab-class .e-tab-header .e-toolbar-item .e-text-wrap { 
        transform: skewX( -30deg ); 
    } 
    .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active { 
        border-bottom: 40px solid green; 
    } 
    .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-toolbar-item { 
        border-bottom: 40px solid lightgreen; 
    } 
    .e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-ileft .e-tab-wrap, 
    .e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-iright .e-tab-wrap { 
        height: 76px; 
        padding-top: 42px; 
        color: black; 
    } 
    .e-tab.parent-tab-class .e-tab-header .e-toolbar-item .e-tab-wrap { 
        padding-left: 0; 
        padding-right: 0; 
        text-align: center; 
    } 
    .e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-ileft.e-active .e-tab-text, 
    .e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-iright.e-active .e-tab-text { 
        color: white; 
    } 
    .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-indicator { 
        left: 0 !important; 
        right: 0 !important; 
        background: transparent; 
    } 
    .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) { 
        padding-left: 100px; 
    } 
</style> 
  
 

You can refer the following UG link to customize the tabs. 

Regards, 
Nevitha 


Loader.
Up arrow icon