-2

Today i was asked to add the support of my angular 4 project with ie9. The problem im facing is that material design light grid are not supported by ie9 as stated in this post.

What can I do to make my input responsive? now they are all on 1 column and im kinda lost.

Also, are there any important polyfill that i must use to support basic stuff on ie9?

Thank you in advance for you help.

Francesco Giberti
  • 95
  • 17

2 Answers2

1

Looking at the Material Design Lite Grid SASS, the first thing that stands out is that it's using flexbox.

.mdl-grid {
    display: flex;

https://github.com/google/material-design-lite/blob/mdl-1.x/src/grid/_grid.scss#L26

IE9 doesn't support flexbox, and it's so old it doesn't even show up in the default view of CanIUse anymore!

https://caniuse.com/#feat=flexbox

There are polyfills for flexbox, but it's a fairly complex CSS feature which means the polyfills might not work well, or might have poor performance, or both!

One such polyfill is flexibility.

0

You can try to check BASE for alternative solution.

Base is built on top of LESS and Sass, and it includes only the most essential of components to build websites: the grid and the basic styling of HTML elements. Base does not come with Javascript components, yet it provides great browser compatibility so much so that it works even with IE7.

Reference:

Base

Deepak-MSFT
  • 10,379
  • 1
  • 12
  • 19
  • What you described sounds very useful, but are you sure that's the right link? The link goes to the base component of the "Material Components for the web". That component very much has javascript as part of it. And the browser support is worse for Web than for Lite. "Unlike MDL, in which support goes back to Internet Explorer 9, MDC Web only supports IE 11." –  Sep 28 '18 at 07:51