CODEWITHSUNDEEP
cssangularjsinternet-explorer-10flexboxangular-material
bjfletcher
bjfletcher

Reputation: 11508

Angular Material <span flex/> in IE10 doesn't take up space

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?

Upvotes: 1

Views: 2923

Answers (2)

bjfletcher
bjfletcher

Reputation: 11508

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.

Upvotes: 4

Michael Benjamin
Michael Benjamin

Reputation: 371063

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:

Upvotes: 1

Related Questions