Header and Footer Interchanged in KendoUi

Question

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 `

score 4 · Accepted Answer · answered Jul 05 '14 at 22:50

4

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.

answered Jul 05 '14 at 22:50

CodingWithSpike

42,906
18
101
138

Thank you. This is very helpful. Can you suggest me which widget I have to use to display two or three divs per row in kendo UI . I have used Ui-Grid-a /b/c...in JQmobile but don't know what to use here in Kendo UI. As of now , the only option i know is to implement it in a grid(table ) , but I am sure this is not the right way...Please help – user2221214 Jul 07 '14 at 04:52
I'm not sure you need a widget for that. Basic CSS for 50/50 would be something close to: `.column-50 { display: inline-block; width: 50%; box-sizing: border-box; }` – CodingWithSpike Jul 07 '14 at 11:25
Visual Studio tells me that box-direction is not a known CSS property name – xinthose Mar 04 '15 at 18:45
1

@xinthose I think its been mostly deprecated in favor of Flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/box-direction however when I wrote this post, that is the CSS property that Kendo was using. – CodingWithSpike Mar 04 '15 at 20:03

Header and Footer Interchanged in KendoUi

1 Answers1