Kendo Ui 中的页眉和页脚互换

Posted 2023-05-07

技术标签:

【中文标题】Kendo Ui 中的页眉和页脚互换【英文标题】：Header and Footer Interchanged in KendoUi 【发布时间】：2014-08-26 08:47:08 【问题描述】：

我的页眉和页脚互换了，即它们出现在相反的位置。页眉在底部，页脚在顶部。我不知道发生了什么，因为这是一个非常基本的问题。这是我的代码`

<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" >
            </li>
            <li id="centered-btns1_s0">
                <img src="img/men2.jpg" >
            </li>
            <li id="centered-btns1_s0">
                <img src="img/men.jpg" >
            </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>

手机中的布局也不如预期。在浏览器中只有一半的屏幕被占用，手机中的布局不正确 Browser ImageAndroid Image `

【问题讨论】：

【参考方案1】：

这对我来说也总是很烦人。随着 ios 的更新，Kendo 非常擅长跟上 iOS 样式的变化，但他们的 Android 样式基于 Android Froyo 或超级旧的东西。那时，Android 的一般样式指南是将常见的标题内容放在底部，将标签条之类的内容放在顶部。

Android 的默认 Kendo CSS 会翻转页眉和页脚以适应这一点。您可以通过包含以下 CSS 将其恢复正常：

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

我的一篇博文中介绍了这个项目和其他 Kendo Mobile 奇事：Kendo Mobile Gotchas, Tips and Tricks。

【讨论】：

谢谢。这很有帮助。你能建议我使用哪个小部件在 kendo UI 中每行显示两个或三个 div 吗？我在 JQmobile 中使用过 Ui-Grid-a /b/c...，但不知道在 Kendo UI 中使用什么。截至目前，我知道的唯一选择是在网格（表）中实现它，但我确信这不是正确的方法......请帮助我不确定您是否需要一个小部件。 50/50 的基本 CSS 接近于：.column-50 display: inline-block; width: 50%; box-sizing: border-box; Visual Studio 告诉我 box-direction 不是已知的 CSS 属性名称 @xinthose 我认为它在很大程度上已被弃用，有利于 Flexbox：developer.mozilla.org/en-US/docs/Web/CSS/box-direction 但是当我写这篇文章时，这是 Kendo 使用的 CSS 属性。

以上是关于Kendo Ui 中的页眉和页脚互换的主要内容，如果未能解决你的问题，请参考以下文章

html页面中的自定义页眉和页脚

更改或删除 TCPDF 中的页眉和页脚

手机间隙应用程序中的页眉和页脚消失了吗？

需要从本地 iframe 中的 src url 中删除页眉和页脚

如何为 xsl-fo 中的每个页面添加页眉和页脚以生成 pdf

RecyclerView 页眉和页脚