Components / Styling & Themes

Browser Compatibility

Kendo UI for Angular is fully compatible with all browsers which are supported by the Angular framework with certain limitations for Internet Explorer 9 (IE9).

Due to the maturity and specifics of IE9, you need to additionally configure your project to avoid styling issues and optimize the browser performance of the components.

Running Your Project in IE9

  1. In your application, include the polyfills for Internet Explorer 9 required by Angular.

  2. When the application is running in IE9, add the k-no-flexbox class to a container element.

    <script>
 if (navigator.userAgent.indexOf("MSIE 9.0") > 0) {
   document.documentElement.className += " k-no-flexbox";
 }
</script>

  3. Compile a stylesheet that includes the fallback styles of the flexbox layout. IE9 has a limit of 4095 selectors per sheet. As a result, if the stylesheet contains more rules, the extra ones will be ignored. To avoid this behavior, split the stylesheets into multiple parts and include only the components that you need.

    // Import component files
@import "~@progress/kendo-theme-default/scss/button/_index.scss";
@import "~@progress/kendo-theme-default/scss/datetime/_index.scss";
@import "~@progress/kendo-theme-default/scss/grid/_index.scss";

// Import layout fixes for browsers without flexbox support
@import "~@progress/kendo-theme-default/scss/no-flexbox.scss";

Known Limitations

None of the component features which fully rely on the CSS flexbox module are supported. For example:

  • Adaptive height of the Grid container is not supported. To work around this issue, set the height of the Grid to the .k-grid-container element.
  • Adaptive sizing of the Calendar container is not supported. To work around this issue, set the height of the Calendar to the .k-calendar-infinite element.
  • For its layout, the Splitter completely depends on flexbox. To provide IE9 support for the Splitter, use the Kendo UI for jQuery Splitter widget as described in the article on integrating Kendo UI for Angular with Kendo UI for jQuery.

Animations

The Kendo UI components for Angular rely on the Angular Animations system. As a result, the animations for the components which utilize the @angular/animations module are not supported in IE9.

In this article