CODEWITHSUNDEEP
htmlangularjsflexboxinternet-explorer-11angular-material
Konrad Klimczak
Konrad Klimczak

Reputation: 1534

angular material layout-align space-between does not work in IE

I am using angular-material for my web app and below is my main template:

<body>
  <div layout="column" layout-fill ng-controller="MainController">

    <ng-include src="'/app/main/views/sidenav.template.html'"></ng-include>
    <md-toolbar class="md-primary md-hue-2" ng-include="'/app/main/views/menu.template.html'">
    </md-toolbar>

    <md-content layout="column" layout-align="space-between stretch">
      <div ui-view></div>

      <div class="footer" ng-include="'/app/main/views/footer.template.html'">
      </div>
    </md-content>

  </div>
</body>

I have a problem which occurs on Internet Explorer 11. Even though I have layout-align set to "space-between", which according to the documentation should position my second div (the one with class "footer") on the bottom of page, it does not work on IE11. It looks like the height of first div (the one with ui-view attribute) is bad calculated and it is too low.

You can see it on http://ldzkklim.ayz.pl/

Is there any workaround for IE? Or maybe I did something wrong within the template?

CodePen link to see the problem: http://codepen.io/anon/pen/ygOLBM

Upvotes: 2

Views: 2435

Answers (1)

kuhnroyal
kuhnroyal

Reputation: 7553

Instead of putting layout="column" layout-align="space-between stretch" on md-content, you should always add one child to it and put it on that if you need some kind of vertical spacing. This is just from my experience but it seems to work here as well.

<md-content flex>
    <div flex layout="column" layout-align="space-between stretch">
        <div flex>content...</div>
        <div>footer</div>
    </div>
</md-content>

Upvotes: 1

Related Questions