Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 02 Sep 2021 05:25 by ADMIN
Timothy
Created on: 26 Feb 2013 23:12
Category: Kendo UI for jQuery
Type: Feature Request
13
Fix box-sizing for kendo controls if set in base css
If the base css has something like the following:
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
This will break the layout of the kendo controls.

Adding the following override will fix it:
	[class^="k-"], [class*="k-"] {
		box-sizing: content-box;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
	}

This catches all elements that have classes with "k-" at the start and overrides the box-sizing back to default.

Consider adding this to the kendo css (either the wildcard version or to each k-* class).
2 comments
leblanc
Posted on: 20 Dec 2013 20:51 
in mycase 
		.k-animation-container, .k-widget, .k-widget *, .k-animation-container *, .k-widget *:before, .k-animation-container *:after{
		 -moz-box-sizing: content-box;
		}

is messing up bootstrap columns - they are not floating correctly.
changing it to padding-box or border-box fixes the layout problem
Timothy
Posted on: 27 Feb 2013 02:16 
Just to add, this is most noticeable with a kendoUI Window, where the title is bleeding outside the title-bar and the controls also bleed half below the title-bar.
Create an account Log In
View
Type
Status
Category