Kendo UI Bootstrap theme not working well with Bootstrap 3.1.0

Question

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?

Answer 1

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

Answer 2

From Kendo docs:

Kendo UI uses the default content-box box model (box-sizing CSS property), while Bootstrap uses the non-default bordex-box model and applies it to all elements on the page, including ones that are unrelated to Bootstrap. ...... A possible easy workaround is to override the Bootstrap CSS, apply content-box box model to all elements on the page and use a border-box box model only to selected Bootstrap elements, which need it (these are all .col-... classes, .row, .container and .container-fluid). You can add the following CSS rules after the Bootstrap and Kendo UI stylesheets.

See reference for sample css solution: http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap#nesting-kendo-ui-widgets-and-bootstrap-grid-layout