Search code examples
angulartypescriptinternet-explorer-9polyfills

Is there a Mdl grid alternative for ie9? [angular4]


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.


Solution

  • 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.