Подтвердить что ты не робот

Тема Kendo UI Bootstrap не работает с Bootstrap 3.1.0

Я только что перерабатываю сайт на основе Bootstrap 2.3 до 3.1, и у меня много проблем с темой Kendo Bootstrap.

Я обычно использую группы форм Bootstrap в пользовательских редакторах всплывающих окон Grid, но они не ведут себя с CSS Kendo.

Я установил Fiddle, чтобы показать проблему. Как вы можете видеть, когда вы редактируете запись, калибровку и позиционирование меток, а также вход и выход.

Это как-то связано с двумя последними записями в файле common-template.less:

.k-animation-container,
.k-widget,
.k-widget *,
.k-animation-container *,
.k-widget *:before,
.k-animation-container *:after
{
    .box-sizing(content-box);
}

.k-button,
.k-textbox,
.k-autocomplete,
div.k-window-content,
.k-tabstrip > .k-content > .km-scroll-container,
.k-block,
.k-edit-cell .k-widget,
.k-grid-edit-row .k-widget,
.k-grid-edit-row .text-box,
.km-actionsheet > li,
.km-shim
{
    .box-sizing(border-box);
}

Если вы удалите их, формы Bootstrap выглядят корректно, но некоторые элементы Kendo (например, пейджер) могут быть повреждены.

Есть ли способ обойти это или не так, как Telerik намерен использовать свою инфраструктуру?

4b9b3361

ОТВЕТЫ

Ответ 1

Из документов Kendo:

В пользовательском интерфейсе Kendo используется модель окна содержимого по умолчанию (размер окна CSS свойство), в то время как Bootstrap использует нестандартную модель bordex-box и применяет его ко всем элементам страницы, включая те, которые не связанный с Bootstrap....... Возможным легким решением проблемы является переопределить Bootstrap CSS, применить модель окна содержимого для всех элементов на странице и использовать модель полевого окна только для выбранных Элементы Bootstrap, которым это необходимо (это все классы .col -...,.row,.container и .container-fluid). Вы можете добавить следующий CSS правила после стилей стилей Bootstrap и Kendo.

См. ссылку для примера css-решения: http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap#nesting-kendo-ui-widgets-and-bootstrap-grid-layout

Ответ 2

В результате я использовал стили ниже CSS, чтобы элементы Bootstrap выглядели прямо внутри элементов Kendo. У нас особенно были проблемы с получением .row (и классов столбцов) для работы внутри Windows Kendo, но этот CSS исправил наши проблемы.

.k-widget select, .k-widget textarea, .k-widget input[type="text"]:not(.k-input), .k-widget input[type="password"], .k-widget input[type="datetime"], .k-widget input[type="datetime-local"], .k-widget input[type="date"], .k-widget input[type="month"], .k-widget input[type="time"], .k-widget input[type="week"], .k-widget input[type="number"], .k-widget input[type="email"], .k-widget input[type="url"], .k-widget input[type="search"], .k-widget input[type="tel"], .k-widget input[type="color"], .k-widget .uneditable-input {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}

.k-window .row, .k-window .row *:not(.k-widget):not(.k-animation-container), .k-widget .row *:before:not(.k-widget) { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

.k-widget .col-lg-1, .k-widget .col-lg-2, .k-widget .col-lg-3, .k-widget .col-lg-4, .k-widget .col-lg-5, .k-widget .col-lg-6, .k-widget .col-lg-7, .k-widget .col-lg-8, .k-widget .col-lg-9, .k-widget .col-lg-10, .k-widget .col-lg-11, .k-widget .col-lg-12, .k-widget .col-md-1, .k-widget .col-md-2, .k-widget .col-md-3, .k-widget .col-md-4, .k-widget .col-md-5, .k-widget .col-md-6, .k-widget .col-md-7, .k-widget .col-md-8, .k-widget .col-md-9, .k-widget .col-md-10, .k-widget .col-md-11, .k-widget .col-md-12, .k-widget .col-sm-1, .k-widget .col-sm-2, .k-widget .col-sm-3, .k-widget .col-sm-4, .k-widget .col-sm-5, .k-widget .col-sm-6, .k-widget .col-sm-7, .k-widget .col-sm-8, .k-widget .col-sm-9, .k-widget .col-sm-10, .k-widget .col-sm-11, .k-widget .col-sm-12, .k-widget .col-xs-1, .k-widget .col-xs-2, .k-widget .col-xs-3, .k-widget .col-xs-4, .k-widget .col-xs-5, .k-widget .col-xs-6, .k-widget .col-xs-7, .k-widget .col-xs-8, .k-widget .col-xs-9, .k-widget .col-xs-10, .k-widget .col-xs-11, .k-widget .col-xs-12
{
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}

Ответ 3

Я решил эту проблему, добавив эти строки css...:

.k-animation-container, .k-widget, .k-widget *, .k-animation-container *, .k-widget *:before, .k-animation-container *:after, .k-block .k-header, .k-list-container {
    box-sizing: inherit;
}
.k-block > .k-header, .k-window-titlebar {
    height:auto;
}

Ответ 4

Это определенно связано с тем, что Bootstrap и Kendo полагаются на разные модели коробки, и трудности в создании элементов, которые полагаются на box-sizing: border-box, смешиваются с теми, которые полагаются на box-sizing: content-box.

В целом, все модели для Kendo основаны на стандартной модели content-box. Тем не менее, все стили для Bootstrap полагаются на более легкую в использовании модель border-box. Самая большая разница между ними заключается в том, как обрабатываются заполнение, границы и т.д. В content-box они являются частью ширины элемента, в border-box они не являются.

Bootstrap предполагает, что вы, конечно же, хотите использовать border-box, и почему бы вам! Он помогает установить все на странице, чтобы использовать border-box, включая виджеты Kendo. Для этого Kendo знает, что Bootstrap может установить все, чтобы использовать border-box, чтобы вернуть все на content-box для виджетов Kendo и всех их детей. Итак, теперь, если вы вложили что-либо в Bootstrap, связанное с чем-либо связанным с Kendo, вы получите неправильную модель коробки. Это беспорядок.

Я попробовал кучу разных хаков, чтобы попытаться смягчить это, но сам факт отсутствия хорошего способа его решения. Это код CSS, который я нашел, работает лучше всего до сих пор (он использует селектор атрибутов CSS, поэтому он не работает для старых браузеров):

.border-box, .border-box * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    [class^="k-"] {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }
}

Затем вы устанавливаете class='border-box' на любой элемент, который может вставляться внутри виджета Kendo, который, как вы знаете, будет иметь содержимое Bootstrap.