NavBar display

[Dharmendra Patel]

Hi,

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

Thanks,
Dan

[Kamen Bundev]

Hello Dan,

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

.km-android .km-view {

    -webkit-box-direction: normal;

}

Greetings,
Kamen Bundev
the Telerik team

[Tom]

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

[Tom]

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?

[Kamen Bundev]

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

[Tom]

Thank you so much.

That's it. It is working now

[OfficeHeart]

Hello,

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

Thanks,
Martin

[Kamen Bundev]

Hi Martin,

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

All the best,
Kamen Bundev
the Telerik team

[OfficeHeart]

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!

[Kamen Bundev]

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