Angular material - scrollable flex child item

Question

I am trying out angular material, and in particular the flex layout attributes.

I have a column layout containing a child div with a row layout, which contains a further two child items, one of which has flex.

What I would like is for the first child item to scroll, but not the second.

<div ng-app="app" 
     layout="column" class="demo" >

  <md-toolbar>
    <h2 class="md-toolbar-tools">
      <span>Toolbar</span>
    </h2>
  </md-toolbar>
  <md-content>
  <div layout="row">
    <md-card  flex>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
    </md-card>
    <div>dgfdgfdg</div>
  </div>
  </md-content>
</div>

Current implementation - http://codepen.io/anon/pen/merXpr

I noticed the md-content directive can be used for scrolling content, which I tried by wrapping around the containing div housing my two child items, but of course this just makes the whole content area scroll.

Is there a way I can get just the md-card item to scroll? I did try wrapping md-card with the md-content instead, but this made no difference.

Thanks

giving position:fixed css to the second child element would work, but that's a workaround and not recommended — Mohit Adwani

cwadrupldijjit cwadrupldijjit · Accepted Answer · 2016-03-03T21:09:25

From what I understand, you want only the card to scroll, but not the rest of the content on the page. I've done this a few times in different contexts, but overall, this is a simple css-related fix.

You want to add the css property overflow: auto as a property to anything that you may want to have scroll within itself. As far as I understand, there is no way to do this strictly with Angular Material directives, attributes, or classes. However, just adding a custom css class to the element in question and defining that in your css works great.

Below, I've pasted your modified code from codepen into a snippet, followed by the modified codepen url.

(function() {
  'use strict';

  angular
    .module('app', ['ngMaterial']);
})();

.demo {
  width: 600px;
  height: 300px;
  background-color: #cccccc;
  margin-top: 40px;
  margin-left: 0px;
}
.scroll-this {
  overflow: auto;
}

<link href="http://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-aria.js"></script>
<script src="http://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div ng-app="app" layout="column" class="demo">
  <md-toolbar>
    <h2 class="md-toolbar-tools">
      <span>Toolbar</span>
    </h2>
  </md-toolbar>
  <div layout="row">

    <md-card class="scroll-this" flex>
      Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>

    </md-card>
    <div>Something here</div>
  </div>
</div>

http://codepen.io/anon/pen/bpdXeB

Angular material - scrollable flex child item

1 Answers