mummakill mummakill - 2 months ago 28
AngularJS Question

Md-content not scrolling

I trying to create a 2-column site with and sticky header, but my doesn't scroll normally.

index.html



<body layout="column">
<navbar></navbar> <!-- directive header -->
<ng-view></ng-view> <!-- main view -->
<foot></foot> <!-- directive footer-->
</body>


main.html



<md-sidenav class="md-sidenav-left" md-component-id="left" md-whiteframe="4">

<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Sidenav Left</h1>
</md-toolbar>
<md-content layout-padding ng-controller="LeftCtrl">
<p hide show-gt-md>
Filters
</p>
</md-content>

</md-sidenav>

<md-content flex style="overflow-y:auto">
<!-- Large text -->
</md-content>


navbar.html



<md-toolbar layout="row">
<button ng-click="toggleSidenav('left')" hide-gt-sm class="menuBtn">
<span class="visually-hidden">Menu</span>
</button>
<h1 class="md-toolbar-tools" layout-align-gt-sm="center">Hello World</h1>
</md-toolbar>

Answer

Add this to your ng-view since you are embeding md-content inside,

 <ng-view  flex layout="column" style="overflow: scroll;" ></ng-view>

DEMO

Comments