15

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?

Mat
  • 1,668
  • 4
  • 23
  • 40

4 Answers4

11

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;
}
John Washam
  • 4,073
  • 4
  • 32
  • 43
9

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

sham
  • 1,346
  • 1
  • 20
  • 28
  • 4
    I love how Kendo tries to spin the situation by calling `content-box` box sizing the "default" model. While it may be default, simply because it is the old-fashioned model, it is neither best nor easy to use, compared to `border-box`. Bootstrap made a great move by using the newer, better model and will hopefully move everyone toward the `border-box` model, instead of making excuses, as Kendo has done. – John Washam Jul 28 '14 at 15:53
  • Kendo's suggested fix from the linked page worked great for me. I have no idea why I'm surprised, but, yeah. Thanks for the tip. – kenchilada Oct 15 '14 at 19:22
  • @JohnWasham That is such a short sighted statement. It wasn't that long ago that everyone referred to the `border-box` model as the **Internet Explorer box model bug**. Everyone thought the `content-box` model was the master race. The `border-box` model was widely used before `content-box`. – surfasb Dec 02 '16 at 15:32
  • @surfasb, what you wrote is true, but I'm not sure how it conflicts with what I wrote. The point was that Telerik shouldn't act as if `content-box` is the best choice, simply because it's "default." – John Washam Dec 04 '16 at 03:54
2

I solved this problem by adding those css lines... :

.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;
}
Dragouf
  • 4,676
  • 4
  • 48
  • 55
1

This definitely has to do with the fact Bootstrap and Kendo rely on different box models and the difficulties in making elements that rely on box-sizing: border-box intermix with those that rely on box-sizing: content-box.

In general, all the styling for Kendo is based on the standard content-box model. However, all the styling for Bootstrap relies on the easier to use border-box model. The biggest difference between the two is how padding, borders, etc. are treated. In content-box they're part of the width of an element, in border-box they're not.

Bootstrap assumes that of course you want to use border-box, and why wouldn't you! It helpfully sets everything on the page to use border-box, including the Kendo widgets. For it's part, Kendo knows that Bootstrap might set everything to use border-box so it sets everything back to content-box for Kendo widgets and all their children. So now if you nest anything Bootstrap related inside anything Kendo related you'll get the wrong box model. It's a mess.

I've tried a bunch of different hacks to try and mitigate this, but the fact of the matter is there's no good way to resolve it. This is the CSS code that I have found works best so far (it uses a CSS attribute selector, so it's a no-go for older browsers):

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

Then you set class='border-box' on any element that might get nested inside of a Kendo widget that you know will have Bootstrap content.

daveaglick
  • 3,600
  • 31
  • 45