Kendo UI Bootstrap theme not working well with Bootstrap 3.1.0

kendo-grid, kendo-ui, twitter-bootstrap

Solution

I ended up using the below CSS styles to get Bootstrap elements to look right inside of Kendo elements. We especially had problems getting `.row` (and column classes) to work inside Kendo Windows, but this CSS fixed our issues.

.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;
}

Problem

I'm just in the process of converting a site based on Bootstrap 2.3 to 3.1 and I've got lots of issues with Kendo's Bootstrap theme. I tend to use use Bootstrap form-groups within custom Grid popup editors, but they don't behave with Kendo's CSS. I've setup a Fiddle to show the problem. As you can see when you edit a record, the sizing and positioning of the labels and input and way out. It's something to do with the last two entries in the `common-template.less` file: ``` .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); } ``` If you remove these the Bootstrap forms look correct, but certain Kendo elements (such as the pager) are adversely affected. Is there a way around this or is this not how Telerik intend for its framework to be used?

Original source