This is a migrated thread and some comments may be shown as answers.

Position of tabs

4 Answers 288 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jaap
Top achievements
Rank 2
Jaap asked on 18 Jan 2012, 03:27 PM
Hi,

AFAIK the tabs can currenly only placed at the top.
Would be a nice feature to be able to position them at the left, bottom or right.

Jaap

4 Answers, 1 is accepted

Sort by
0
Dave
Top achievements
Rank 1
answered on 18 Jan 2012, 03:34 PM
I was just about to post this same thing. I'm porting something over from the Telerik ASP.NET Ajax controls and I use several TabStrips where the tabs are stacked vertically to the left or right of the content area. In general, I think this would be a nice improvement to the Kendo TabStrip control.
0
Jaap
Top achievements
Rank 2
answered on 18 Jan 2012, 04:00 PM
0
Brian Roth
Top achievements
Rank 1
answered on 03 May 2013, 08:42 PM
This would definitely be a nice feature to have. This is a little late, but here is a quick and dirty CSS workaround for a vertical orientation on the left side. Just add the tabstrip-vertical class to the tabstrip element. It's not perfect, and a better/more robust solution would be appreciated.

.k-widget.k-tabstrip.tabstrip-vertical {
    /*Width of the tabs*/
    padding-left:12em;
}
 
    .k-widget.k-tabstrip.tabstrip-vertical > ul.k-tabstrip-items {
        left:-1px;
        position:absolute;
    }
 
        .k-widget.k-tabstrip.tabstrip-vertical > ul.k-tabstrip-items > li.k-item {
            display:block;
            border-radius:4px 0 0 4px;
            border-width:1px 0 1px 1px;
            /*Width of the tabs*/
            width:12em;
        }
 
            .k-widget.k-tabstrip.tabstrip-vertical > ul.k-tabstrip-items > li.k-item.k-state-active {
                border-right-color:#fff;
                border-right-width:1px;
            }
0
Pani
Top achievements
Rank 1
answered on 21 May 2014, 04:36 PM
Hello Brian-

I know this post has been a while, but I see you are still very active on this forum...

Could you post a working example where the CSS you mention has been applied to the TabStrip element as part of an MVC project?

Thanks much!
Tags
TabStrip
Asked by
Jaap
Top achievements
Rank 2
Answers by
Dave
Top achievements
Rank 1
Jaap
Top achievements
Rank 2
Brian Roth
Top achievements
Rank 1
Pani
Top achievements
Rank 1
Share this question
or