Simple TabStrip markup not working. Am I going nuts?

2 posts, 0 answers
  1. CM
    CM avatar
    12 posts
    Member since:
    Nov 2012

    Posted 07 Nov 2012 Link to this post

    Hi all,

    I am excited about the prospect of using KendoUI and am in my trial, but I can't even make a simple tabstrip UI page work correctly. I was following along with the intro tutorial here: http://docs.kendoui.com/howto/build-apps-with-kendo-ui-mobile

    Couldn't get that to work. CSS works and the widgets are there, but when I click on the About tab the about.html is appended to the URL, but I don't actually go to the about.html page. 

    I decided to rip open the sample apps and take a look. I changed my index.html around to try to load a different view when clicking on the about tabstrip:

    <!DOCTYPE html>
    <html>
    <head>
        <title>My App</title>
         
        <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
    </head>
    <body>
        <div data-role="view" data-layout="default">
            Hello Mobile World!
        </div>
     
        <div data-role="view" id="about" data-title="About">
            About this app.
        </div>
     
        <div data-role="layout" data-id="default">
            <header data-role="header">
                <div data-role="navbar">My App</div>
            </header>
            <!-- View content will render here -->
            <footer data-role="footer">
                <div data-role="tabstrip">
                    <a href="#">Home</a>
                    <a href="#about">About</a>
                </div>
            </footer>
        </div>
         
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/kendo.mobile.min.js" type="text/javascript"></script>
     
        <script>
            var app = new kendo.mobile.Application();
        </script>
    </body>
    </html>

    I get the about view to load, but not "inside" of the layout, the screen is white, no title bar and just has the about text.

    So, am I going mad? Any ideas are welcome. Thanks!
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 12 Nov 2012 Link to this post

    Hello Christopher,

    The data-layout option should be specified to the "about" view in order for the layout to be used e.g.

    <div data-role="view" data-layout="default" id="about" data-title="About">
        About this app.
    </div>
    Kind regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top