页眉和页脚在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 ` 此外，手机中的布局也不尽如人意。在浏览器中，只有一半的屏幕被占用，而在手机中布局不合适浏览器图片 Android Image

Answer 1

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. 作为iOS更新，剑道非常擅长跟上iOS样式的变化，但他们的Android样式基于Android Froyo或者超级老款。 Back then, Android general styling guidelines were to put common header stuff at the bottom, and things like tab-strips at the top. 那时候，Android的一般样式指南是在底部放置常见的标题内容，以及顶部的标签条等内容。

The default Kendo CSS for Android flips the header and footer to fit this. Android的默认Kendo CSS翻转页眉和页脚以适应这一点。 You can put it back to normal by including this CSS: 您可以通过包含此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 . 这个项目和其他剑道移动的怪异性在我的一篇博文中有所介绍： Kendo Mobile Gotchas，Tips and Tricks 。

页眉和页脚在KendoUi中互换

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-07-05 22:50:33

页眉和页脚在KendoUi中互换

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-07-05 22:50:33

解决方案1
4 已采纳 2014-07-05 22:50:33