CODEWITHSUNDEEP
angularjslayoutangular-material
user1242321
user1242321

Reputation: 1696

md-content does not consume full height of the parent element

<md-content flex class="md-padding page-content">
    <div ui-view flex layout="column">   
       <div class="center" layout="row" flex>
        <md-content layout="column" flex="30">
          <md-list-item ng-repeat="entity in vm.entities">
            <md-checkbox ng-model="entity.selected"></md-checkbox>
            <p>{{entity.info}}</p>
            <md-icon class="md-secondary"
                     ng-click="doSecondaryAction($event)" aria-label="Chat">message</md-icon>
          </md-list-item>
        </md-content>
        <md-divider></md-divider>
        <md-content layout="column" flex="70">
          Details here!
        </md-content> 
      </div> 
     </div>   
 </md-content>

In my code above, the outermost md-content occupies the complete page; however with the ui-view gived column layout and flex class, I expected it to occupy the complete height of the page, however it occupies the height consumed by the content only.

Can you please help with the error in the code, so ui-view can occupy the complete page?

Upvotes: 0

Views: 1852

Answers (1)

camden_kid
camden_kid

Reputation: 12813

Here you go - CodePen

You need to utilise layout-fill. From the docs

enter image description here

In order for this to work an upper element must occupy the full screen. In the above example it is <body>.

Markup

<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp" layout-fill>
  <md-content layout-fill flex class="md-padding page-content">
    <div ui-view flex layout="column" layout-fill>   
      <div class="center" layout="row" flex>
        <md-content id="list" layout="column" flex="30">
          <md-list-item ng-repeat="entity in vm.entities" flex="none">
            <md-checkbox ng-model="entity.selected"></md-checkbox>
            <p>{{entity.info}}</p>
            <md-icon class="md-secondary"
                     ng-click="doSecondaryAction($event)" aria-label="Chat">message</md-icon>
          </md-list-item>
        </md-content>
        <md-divider></md-divider>
        <md-content id="details" layout="column" flex="70">
          Details here!
        </md-content> 
      </div> 
    </div>   
  </md-content>
</div>

CSS

.page-content {
  background: yellow
}

#list {
  overflow-y: auto;
  overflow-x: hidden;
}

Upvotes: 1

Related Questions