Hello, can the TabStrip control alter it's orientation based on the viewport/device it's presented on? Let's say I have 5 tabs on a page and when I view this page on an iPhone or Android phone can the tabs align themselves in a stacked fashion (all-closed state). In short, how mobile-friendly is this control - we don't want users to have to scroll horizontally on a mobile device. if this is possible can it be achieved through configuration of the control or is it more of a hand-coded task?
Thanks.
7 Answers, 1 is accepted
Please take a look at the following forum thread on the matter TabStrip tabs - responsive to Mobile devices and the attached sample.
Best regards,
Rumen
Progress Telerik
Rank 1
Great, that's just what we were looking for!
Thank you,
Simon
Regards,
Rumen
Progress Telerik
Rank 1
Rumen, I showed this to our designer (sorry, web design not my strength) and she indicated how we as an organization want to display tabbed content as indicated in our styleguide: https://www.nscc.ca/styleguide/content-layouts/content-layout-007.asp. This is done with jquery tabs.
I've attached a couple of screenshots but the idea is that in the mobile view as content is being tabbed through the active tab would be open/visible and all other tabs closed/hidden and the tab-specific content would appear under it's respective tab. This is different from the "tabs as navigation" idea in the "normal/web" view where all content is displayed inside RadMultiPage and RagPageView controls. Is this achievable?
Thanks for your help,
Simon
In this scenario using media queries you can use two components: RadTabStrip when the page is displayed on desktop and a PanelBar when the resolution shrinks on mobile:
<%@ Page Language="C#" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <style> @media (min-width:1px) and (max-width:768px) { .tabWrapper { display: none; } .panelWrapper { display: block; } } @media (min-width:768px) { .tabWrapper { display: block; } .panelWrapper { display: none; } } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager runat="server" /> <div class="tabWrapper"> <telerik:RadTabStrip ID="RadTabStrip1" runat="server"> <Tabs> <telerik:RadTab Text="Tab1"></telerik:RadTab> <telerik:RadTab Text="Tab2"></telerik:RadTab> <telerik:RadTab Text="Tab3"></telerik:RadTab> </Tabs> </telerik:RadTabStrip> </div> <div class="panelWrapper"> <telerik:RadPanelBar ID="RadPanelBar1" runat="server"> <Items> <telerik:RadPanelItem Text="Tab1" Expanded="true"> <ContentTemplate>Text</ContentTemplate> </telerik:RadPanelItem> <telerik:RadPanelItem Text="Tab2" Expanded="true"> <ContentTemplate>Text</ContentTemplate> </telerik:RadPanelItem> <telerik:RadPanelItem Text="Tab3" Expanded="true"> <ContentTemplate>Text</ContentTemplate> </telerik:RadPanelItem> </Items> </telerik:RadPanelBar> </div> </form></body></html>Regards,
Rumen
Progress Telerik
Rank 1
Ok, we'll give that a try.
Thanks for the help,
Simon
Please let me know if any other questions pop up.
Regards,
Rumen
Progress Telerik