CODEWITHSUNDEEP
angularjsflexboxangular-material
Konrad Janczyk
Konrad Janczyk

Reputation: 182

angular-material holy grail flexbox layout

I am using angular-material webkit and I have issue with height of the container that is always setting depending on the device. The problem I'm having is with child elements 'leaving' middle container and rendering on the footer area. On the image, number 1 shows situation when content of the green area is small enough to fit device height. Number 2 shows my problem and 3 is my ideal layout: Problem and goal

My layout looks like this:

<body layout="column">
  <div> header </div>
  <div layout="row" flex">
    <md-sidenav md-is-locked-open="true" flex="20"></md-sidenav>
    <div layout="column" flex ui-view></div>
    <md-sidenav class="md-sidenav-right" md-is-locked-open="true" flex="20"></md-sidenav>
  </div>
  <div class=footer"></div>
</body>

I can't find solution on the angular-material docs - maybe I don't get some of the ideas but it's the second day I am trying to implement that layout and I'm still failing.

Upvotes: 2

Views: 612

Answers (1)

camden_kid
camden_kid

Reputation: 12813

I think this is the best you can do with flex - CodePen

Markup

<div id="all" ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout="column" flex>
  <div style="background:red; height:100px"></div>
  <div layout="row" flex="90">
    <div style="background:blue" flex="10"></div>
    <div layout="column" flex="80">
      <div >
          <!-- content -->
      </div>
      <div style="background:yellow; height:100px"></div>
    </div>
    <div style="background:blue" flex="10"></div>
  </div>
</div>

Upvotes: 3

Related Questions