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

Stacking tabs when viewport size changes

7 Answers 40 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 07 May 2019, 06:14 PM

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

Sort by
0
Accepted
Rumen
Telerik team
answered on 10 May 2019, 10:48 AM
Hi Simon,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Simon
Top achievements
Rank 1
answered on 10 May 2019, 12:09 PM

Great, that's just what we were looking for!

Thank you,

Simon

0
Rumen
Telerik team
answered on 10 May 2019, 12:37 PM
Great! Keep the good work.

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Simon
Top achievements
Rank 1
answered on 10 May 2019, 01:12 PM

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

 

0
Rumen
Telerik team
answered on 10 May 2019, 01:36 PM
Hello,

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>
<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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Simon
Top achievements
Rank 1
answered on 10 May 2019, 02:37 PM

Ok, we'll give that a try.

Thanks for the help,

Simon

0
Rumen
Telerik team
answered on 13 May 2019, 05:21 AM
Take your time, Simon!

Please let me know if any other questions pop up.

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TabStrip
Asked by
Simon
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Simon
Top achievements
Rank 1
Share this question
or