Search code examples
jqueryjquery-mobilekendo-uitelerikkendo-mobile

Header and Footer Interchanged in KendoUi

My header and footer are interchanged i..e they are appearing in opposite places .Header at bottom and footer at top . I have no clue of what is going on as this is a very basic one. Here is my code` 

<head>
<title>kProduct Details</title>

<link rel="stylesheet" href="lib/responsiveSlides.css">
<link rel="stylesheet" href="lib/themes.css">
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.all.min.js"></script>
<script src="js/responsiveSlides.min.js"></script>

<style>
.k-grid-header-wrap {
    background: white;
}
.k-grid-header {
    padding:0!important;
}
.km-pane {
    margin:0;
}
</style>


<body>

    <div class="rslides_container" data-role="view" data-layout="default">

        <ul class="rslides centered-btns centered-btns1" id="slider1">
            <li id="centered-btns1_s0">
                <img src="img/men1.jpg" alt="">
            </li>
            <li id="centered-btns1_s0">
                <img src="img/men2.jpg" alt="">
            </li>
            <li id="centered-btns1_s0">
                <img src="img/men.jpg" alt="">
            </li>
        </ul>

    </div>

</body>

<section data-role="layout" data-id="default">

    <div data-role="header">
        <p>I am Header</p>
    </div>
    <!--View content will render here-->
    <div data-role="footer" style="background:grey">
        <p>My App</p>
    </div>


</section>

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



$("#slider1").responsiveSlides({
    auto: false,
    nav: true,
    namespace: "centered-btns"
});
</script>

</html>

Also the layout is not as expected in the phone.In the browser only half of the screen is occupied and in the phone the layout is not proper Browser Image Android Image `

Solution

  • This is always an annoyance for me too. Kendo is really good at keeping up with iOS styling changes as iOS updates, but their Android styling is based on like Android Froyo or something super old. Back then, Android general styling guidelines were to put common header stuff at the bottom, and things like tab-strips at the top.

    The default Kendo CSS for Android flips the header and footer to fit this. You can put it back to normal by including this CSS:

    .km-android .km-view {
    -moz-box-direction: initial;
    -webkit-box-direction: initial;
    -ms-box-direction: initial;
    box-direction: initial;
}

    This item and other Kendo Mobile oddities are covered on one of my blog posts: Kendo Mobile Gotchas, Tips and Tricks.