Блог

Главная - Вопросы по программированию - Верхний и нижний колонтитулы поменялись местами в KendoUI

Верхний и нижний колонтитулы поменялись местами в KendoUI

#jquery #jquery-mobile #kendo-ui #telerik #kendo-mobile

#jquery #jquery-мобильный #kendo-пользовательский интерфейс #telerik #kendo-мобильный

Вопрос:

Мои верхний и нижний колонтитулы поменялись местами, то есть они отображаются в противоположных местах.Верхний и верхний колонтитулы расположены внизу. Я понятия не имею, что происходит, поскольку это очень простой вариант. Вот мой код ` 

 <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>

Также макет не такой, как ожидалось в телефоне.В браузере занята только половина экрана, а в телефоне макет неправильный
Изображение браузера изображение Android
`

Ответ №1:

Меня это тоже всегда раздражает. Kendo действительно хорошо справляется с изменениями стиля iOS по мере обновления iOS, но их стиль Android основан на Android Froyo или чем-то очень старом. В то время общими рекомендациями по стилю Android было размещать обычные элементы заголовка внизу, а такие элементы, как полосы табуляции, вверху.

Стандартный Kendo CSS для Android изменяет верхний и нижний колонтитулы, чтобы они соответствовали этому. Вы можете вернуть его в нормальное состояние, включив этот CSS:

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

Этот пункт и другие странности Kendo Mobile описаны в одном из моих постов в блоге: Ошибки, советы и хитрости Kendo Mobile.

Комментарии:

1. Спасибо. Это очень полезно. Можете ли вы подсказать мне, какой виджет я должен использовать для отображения двух или трех разделов в строке в kendo UI. Я использовал Ui-Grid-a / b / c … в JQMobile, но не знаю, что использовать здесь, в Kendo UI. На данный момент единственный известный мне вариант — реализовать его в виде сетки (таблицы), но я уверен, что это неправильный способ … Пожалуйста, помогите

2. Я не уверен, что вам нужен виджет для этого. Базовый CSS для 50/50 был бы чем-то близким к: .column-50 { display: inline-block; width: 50%; box-sizing: border-box; }

3. Visual Studio сообщает мне, что box-direction не является известным именем свойства CSS

4. @xinthouse Я думаю, что его в основном не рекомендовали в пользу Flexbox: developer.mozilla.org/en-US/docs/Web/CSS/box-direction однако, когда я писал этот пост, это свойство CSS, которое использовала Kendo.