Angular Material in IE10 doesn't take up space

Question

I have the following:

<div layout="row">
  <span>Left side</span>
  <span flex/>
  <span>Right side</span>
</div>

where the middle <span flex/> would push the "Right side" to the right. This works great on Chrome, Safari, Firefox, IE11 but not IE10.

The flex attribute from Angular Material looks like to have added the -ms specifics but obviously not working for IE10.

Any suggestions?

http://caniuse.com/#search=flex as you can see here, is not very supported in IE 10 — Florin Pop, Oct 22 '15 at 13:57
actually it's very unsupported by ie10. ie11 does a great job though — Sebastian Wozny, Oct 22 '15 at 14:08
Hey, many thanks for your comments. I see that Flexie's gone outdated and there doesn't seem to be any great solution to this. :/ — bjfletcher, Oct 22 '15 at 14:58

score 4 · Accepted Answer · answered Oct 22 '15 at 15:48

4

The simple solution I've ended up with is to replace <span> with <div>. Instead of:

<div layout="row">
  <span>Left side</span>
  <span flex/>
  <span>Right side</span>
</div>

Use:

<div layout="row">
  <div>Left side</div>
  <div flex/>
  <div>Right side</div>
</div>

That's working great on IE10.

answered Oct 22 '15 at 15:48

bjfletcher

11,168
4
52
67

it just worked for me putting it like this :
– JLazar0 Mar 26 '20 at 14:24

score 1 · Answer 2 · edited May 23 '17 at 12:23

1

IE10 does not support the current flexbox specification.

It only supports the old "tweener" syntax, which almost no other browser, either current or recently superseded, uses.

If you do need flexbox support in IE10, keep in mind you'll need to use prefixes and several currently available flex properties (e.g., justify-content: space-around) simply aren't available.

As it relates to Angular Material, here's some more info: flexbox layout doesn't work in IE10

More info:

edited May 23 '17 at 12:23

Community

1
1

answered Oct 22 '15 at 15:01

Michael Benjamin

346,931
104
581
701

1

That Angular Material link helps a lot. Thanks :) – bjfletcher Oct 22 '15 at 15:45
1

That inspired me to the solution of simply replacing `span` with `div` with which I've given as an answer alongside your. – bjfletcher Oct 22 '15 at 15:49

Angular Material in IE10 doesn't take up space

2 Answers2