multiple layouts not working?

4 posts, 0 answers
  1. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 07 Nov 2013 Link to this post

    I'm trying to use multiple layout definitions without success. The views are always using the default one. The code is looking like that:
    <div data-role="layout" data-id="default">
        <header data-role="header">
            <div data-role="navbar"> some content ... </div>
        </header>
        <footer data-role="footer">
            <div data-role="tabstrip"> some content... </div>
        </footer>
    </div>
     
    <div data-role="layout" data-id="layout2">
        <header data-role="header">
            <div data-role="navbar"> some other content ... </div>
        </header>
        <footer data-role="footer">
            <div data-role="tabstrip"> some other content... </div>
        </footer>
        </footer>
    </div>
     
    <div
        id="view1"
        data-role="view"
        data-layout="default"
    >
       content...
    </div>
     
    <div
        id="view2"
        data-role="view"
        data-layout="layout2"
    >
       content...
    </div>
    "view2" is using the default layout as well (instead of "layout2"). Am I doing something wrong? I just followed the layouts documentation.
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 08 Nov 2013 Link to this post

    Hello Roman,

    The approach should work in general. The code you have pasted has duplicate footer closing tags, though, so the layout may not be recognized properly.

    Regards,
    Petyo
    Telerik
    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
  4. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 08 Nov 2013 Link to this post

    Hi Petyo,
    thanks for your reply. The double-footer was a mistake while copying the code into the forum. It's correct in the original code.

    But I played around with it a bit more and found the problem. I had to specify a data-title attribute or the layout would not render the header at all, which contains:
    <span data-role="view-title"></span>
    If I remove the span with the view-title role, it works fine without data-title.

    Strangely enough, this happens only for additional layouts, not for the first one defined as "default". It renders fine even with the constellation above. That's why I didn't realize the problem at first.
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 12 Nov 2013 Link to this post

    Hi Roman,

    Which Kendo UI Mobile version are you using? I've tried to reproduce your issue in a jsBin, but to no avail. Can you check if I'm missing something?

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready