Bootstrap 3 Grid System Does Not Work Correctly Within a 3Rd Party Styled Div (Kendo)

Bootstrap 3 grid system does not work correctly within a 3rd party styled div (Kendo)

See here for an explanation of the issue and a possible workaround:

http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap

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. This breaks the layout of the Kendo UI widgets, which are placed inside a Bootstrap grid layout, forcing us to override the Bootstrap CSS and reapply the content-box box model to Kendo UI widgets. As a result, a Bootstrap grid layout placed inside a Kendo UI widget will not work as expected. In general, 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.

Ability to use Bootstrap 3 grid system to specify width of select element

You have to add the classes to an wrapping div.

<div class="col-md-2">
  <select id="statusSelect" class="form-control" name="statusCode">
</div>

Related Topics