NavBar display

10 posts, 0 answers
  1. Dharmendra Patel
    Dharmendra Patel avatar
    1 posts
    Member since:
    Jun 2009

    Posted 08 Feb 2012 Link to this post

    Hi,

    Is there anyway to always display NavBar on the top in all devices?

    Thanks,
    Dan
  2.
  3. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 09 Feb 2012 Link to this post

    Hello Dan,

    Yes, you can override the NavBar reversal style with this CSS:

    Greetings,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Tom
    Tom avatar
    3 posts
    Member since:
    Mar 2013

    Posted 10 Mar 2013 Link to this post

    Hi all,

    adding the style is not working for me.

    I am using the example from this website:
    http://demos.kendoui.com/mobile/navbar/index.html#

    I am using this snippet 

    <script>
        var app =  new kendo.mobile.Application($(document.body), {
             platform: "android"
         });
    </script>

    to inititalize.

    I have also added

    .km-android .km-view {
        -webkit-box-direction: normal;
    }

    to the stylesheet.

    But the navbar is still at the bottom of the page.

    Any ideas?
    Thanks a lot
  7. Tom
    Tom avatar
    3 posts
    Member since:
    Mar 2013

    Posted 10 Mar 2013 Link to this post

    I have just figured out that it is indeed working on my Android device but it is not working in Google Chrome.

    Any ideas how to make this work in Google Chrome too?
  8.
  9. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 11 Mar 2013 Link to this post

    Hello Tom,

    We recently updated our flexbox support and in Chrome it now relies on the latest syntax. The correct style you need is listed in our documentation.

    Kind regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Tom
    Tom avatar
    3 posts
    Member since:
    Mar 2013

    Posted 11 Mar 2013 Link to this post

    Thank you so much.

    That's it. It is working now

  13. OfficeHeart
    OfficeHeart avatar
    101 posts
    Member since:
    Aug 2008

    Posted 15 May 2013 Link to this post

    Hello,

    Is there an same solution for windows phone (header on top)?

    Thanks,
    Martin
  14.
  15. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 May 2013 Link to this post

    Hi Martin,

    The header is already on top in Windows Phone. Can you clarify a bit?

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. OfficeHeart
    OfficeHeart avatar
    101 posts
    Member since:
    Aug 2008

    Posted 15 May 2013 Link to this post

    Hi,

    I forced the app style to android on all devices and set the header on top:

    .km-android .km-view {
        -webkit-box-direction: normal;
    }
    But on windows phone, the navbar is still in the footer.

    Thanks!
  19. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 May 2013 Link to this post

    Hello Martin,

    This is expected as your snippet only contains the old flexbox syntax. You will need the new one for newer WebKit browsers as the link to our documentation above explains, and the MS prefix syntax for IE. The whole rule should look something like this:
    .km-android .km-view
    {
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
    }

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top