Browser Compatibility

KendoReact is fully compatible with all browsers which are supported by the React 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 React.

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

   Copy Code<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.

   Copy Code// Import component files
   @import "~@progress/kendo-theme-default/scss/button";
   @import "~@progress/kendo-theme-default/scss/datetime";
   @import "~@progress/kendo-theme-default/scss/grid";
   
   // Import layout fixes for browsers without flexbox support
   @import "~@progress/kendo-theme-default/scss/no-flexbox";

Flexbox-Related Limitations

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

• Adaptive height of the Grid container—To work around this issue, set the height of the Grid to the .k-grid-container element.
• Adaptive sizing of the Calendar container—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.

Suggested Links

• Themes and Styling in KendoReact