38 lines
1.8 KiB
CSS
38 lines
1.8 KiB
CSS
/*
|
|
Kendo UI uses the default content-box box model (box-sizing CSS property),
|
|
while Bootstrap uses the non-default border-box model and applies it to all elements on the page, including the ones that are unrelated to Bootstrap. This breaks the layout of the Kendo UI widgets,
|
|
which are placed inside a Bootstrap grid layout, leading to the overriding of the Bootstrap CSS and reapplying the content-box box model to the widgets.
|
|
As a result, a Bootstrap grid layout, placed inside a Kendo UI widget, is not going to work as expected. In general, the multiple-level nesting of the two products is bound to break the one that is on the inside,
|
|
unless an additional CSS rule is used for each new level of nesting.
|
|
*/
|
|
|
|
/* reset everything to the default box model */
|
|
/**, :before, :after
|
|
{
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
}*/
|
|
|
|
/* set a border-box model only to elements that need it
|
|
*/
|
|
.form-control, /* if this class is applied to a Kendo UI widget, its layout may change */
|
|
.container,
|
|
.container-fluid,
|
|
.row,
|
|
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xlg-1,
|
|
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xlg-2,
|
|
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xlg-3,
|
|
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xlg-4,
|
|
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xlg-5,
|
|
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xlg-6,
|
|
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xlg-7,
|
|
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xlg-8,
|
|
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xlg-9,
|
|
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xlg-10,
|
|
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xlg-11,
|
|
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xlg-12 {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|