user1242321 user1242321 - 1 month ago 26
AngularJS Question

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?

Answer

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;
}
Comments