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

NavBar display

9 Answers 171 Views
This is a migrated thread and some comments may be shown as answers.
Dharmendra Patel
Top achievements
Rank 1
Dharmendra Patel asked on 08 Feb 2012, 05:13 PM
Hi,

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

Thanks,
Dan

9 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 09 Feb 2012, 03:49 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tom
Top achievements
Rank 1
answered on 10 Mar 2013, 05:32 PM
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
0
Tom
Top achievements
Rank 1
answered on 10 Mar 2013, 06:19 PM
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?
0
Kamen Bundev
Telerik team
answered on 11 Mar 2013, 08:40 AM
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!
0
Tom
Top achievements
Rank 1
answered on 11 Mar 2013, 11:37 AM
Thank you so much.

That's it. It is working now

0
OfficeHeart
Top achievements
Rank 1
answered on 15 May 2013, 12:58 PM
Hello,

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

Thanks,
Martin
0
Kamen Bundev
Telerik team
answered on 15 May 2013, 01:01 PM
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!
0
OfficeHeart
Top achievements
Rank 1
answered on 15 May 2013, 01:19 PM
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!
0
Kamen Bundev
Telerik team
answered on 15 May 2013, 01:42 PM
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!
Asked by
Dharmendra Patel
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Tom
Top achievements
Rank 1
OfficeHeart
Top achievements
Rank 1
Share this question
or