Styling & Themes / Browser Compatibility / 
New to Kendo UI for Angular? Start a free 30-day trial

Browser Compatibility

Kendo UI for Angular is fully compatible with all [browsers which are supported by the Angular framework]({{ site.data.urls.angular['ngbrowsersupport'] }}) with certain limitations for Internet Explorer 9 (IE9).

The age and specifics of IE9 require additional project configuration 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]({{ site.data.urls.angular['ngbrowsersupport'] }}#polyfills).

  2. When the application is running in IE9, add the k-no-flexbox class to the <html> 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. If the stylesheet contains more rules, IE9 will ignore the extra ones. To avoid this behavior, split the stylesheets into multiple parts and include only the components that you need.

    // Import the 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 the layout fixes for browsers without flexbox support.
@import "~@progress/kendo-theme-default/scss/no-flexbox.scss";

Known Limitations

Flexbox-Related Features

The component features which rely fully on the CSS flexbox module are not 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.
  • The Splitter layout depends entirely on flexbox. To provide IE9 support, 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.

Suggested Links

Previous
Loading indicator
Next
Overview

In this article

Not finding the help you need?

Contact Support