CODEWITHSUNDEEP
angular-materialinternet-explorer-11
ctb
ctb

Reputation: 1222

layout-wrap (angular material) not wrapping in ie11

I have what I thought was a pretty simple layout, but in ie11, layout-wrap doesn't seem to be working. Check out this codepen, or just consider the following code:

<div layout="row">
    <div layout="column">
        <div layout="row" layout-wrap>
            <div>lorem ipsum dolor sit amet</div>
            <div>lorem ipsum dolor sit amet</div>
            <div>lorem ipsum dolor sit amet</div>
            <div>lorem ipsum dolor sit amet</div>
        </div>
    </div>
</div>

With that html, chrome and edge will wrap as expected, but ie11 will not. If you remove outer-most container (the row), then ie11 will work as expected. Why would that container make a difference? Anyone have an idea how I can coerce ie11 into wrapping those items without removing that containing row?

Upvotes: 0

Views: 1430

Answers (1)

ctb
ctb

Reputation: 1222

So, after a more digging and experimenting, it became clear that this has nothing to do with angular material at all, and is just weird behavior in IE11. I was able to clearly reproduce the issue with plain css. Check out this CodePen here, or consider this html:

<div style="display: flex;flex-direction: row;">
  <div style="display: flex;flex-direction: column;">
    <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
      <div>Lorem ipsum dolor sit amet</div>
      <div>Lorem ipsum dolor sit amet</div>
      <div>Lorem ipsum dolor sit amet</div>
      <div>Lorem ipsum dolor sit amet</div>
      <div>Lorem ipsum dolor sit amet</div>
    </div>
  </div>
</div>

The solution was pretty easy to find here on SO as well, once I tried search for an answer that didn't involve Angular Material. Basically, it looks like you need to have a width specified for the container of the container that has flex-wrap specified (the column in the example above). You can do this with width:100%, or with a flex="100" in angular material, or probably plenty of other little tricks, but anyway, the reason the items don't wrap is because the element that contains the wrapped children will just happily go outside of its containing element in ie11. How aggravating.

Upvotes: 1

Related Questions