Angular material layout issue in IE11 for smaller screen resolution

Question

I'm working on angular material layout, it's working fine in all the browsers including IE11, but for smaller screen resolutions, I'm facing content overlapping issue. Here's the code I've tried:

HTML:

<div layout="row" layout-sm="column" layout-xs="column" layout-wrap>
    <div class="innersection" flex="25" flex-sm="100" flex-xs="100" layout="row">
        Title <br/><br/> Description:
        <br/> Manage your account, username and password setting<br/> Manage your account, username and password setting
    </div>
    <div class="innersection" flex="25" flex-sm="100" flex-xs="100" layout="row">
        Title <br/><br/> Description:
        <br/> Manage your account, username and password setting
    </div>
    <div class="innersection" flex="25" flex-sm="100" flex-xs="100" layout="row">
        Title <br/><br/> Description:
        <br/> Manage your account, username and password setting<br/> Manage your account, username and password setting
    </div>
    <div class="innersection" flex="25" flex-sm="100" flex-xs="100" layout="row">
        Title <br/><br/> Description:
        <br/> Manage your account, username and password setting
    </div>
</div>

CSS:

.innersection {
  background: #fff; padding:8px; border:1px solid;
}

Here's working fiddle example: http://jsfiddle.net/xjb0soLn/17/

Appreciate your help.

Add `flex: auto` to `.innersection`. http://jsfiddle.net/xjb0soLn/18/ — Michael Benjamin, Jan 27 '17 at 00:15
Thanks. But is there any solution without adding CSS style, something like adding flex="auto"? — SatAj, Jan 27 '17 at 00:59
I don't have a lot of experience with Angular. Maybe somebody else can help you. — Michael Benjamin, Jan 27 '17 at 01:00

score 0 · Accepted Answer · answered Feb 06 '17 at 23:50

I found the solution: http://jsfiddle.net/xjb0soLn/22/

Here's the HTML:

<div layout-gt-sm="row" layout-wrap>
    <div class="innersection" flex-gt-sm="25">
        Title <br/><br/> Description:
        <br/> Manage your account, username and password setting<br/> Manage your account, username and password setting
    </div>
    <div class="innersection" flex-gt-sm="25">
        Title <br/><br/> Description:
        <br/> Manage your account, username and password setting
    </div>
    <div class="innersection" flex-gt-sm="25">
        Title <br/><br/> Description:
        <br/> Manage your account, username and password setting<br/> Manage your account, username and password setting
    </div>
<div class="innersection" flex-gt-sm="25">
        Title <br/><br/> Description:
        <br/> Manage your account, username and password setting
    </div>
</div>

Angular material layout issue in IE11 for smaller screen resolution

1 Answers1