Recently I discovered AngularJS Material framework and now I'm trying to use it. For the 1st time I found no similar thread so I dare to ask. When I add my custom components like this:
<body ng-app="katalogApp" layout="column">
<katalog></katalog>
</body>
...everything works pretty well besides flex scrolling. After pasting the component template directly in App:
<body ng-app="katalogApp" layout="column">
<div layout="row" flex>
<md-sidenav md-is-locked-open="true" class="md-whiteframe-4dp" layout="column">
it has a scrollbar
</md-sidenav>
<md-content flex>
content
</md-content>
</div>
</body>
...it works but that's dirty as hell. If I add css:
md-sidenav {position:fixed!important}
to the container - there's a scrollbar but the content is misplaced. I would be grateful if someone knows how to deal with it.
Instead of positioning md-sidenav tag, what you can do is give height to sidenav so it'll have scrollbar & accordingly have height to main content also. Now you can add new class to md-sidenav with css as:
.leftSideNav {
height: 100vh;
}
.content {
height: 100vh;
padding: 7px;
}
Where I've added these classes to md-sidenav & md-content respectively:
<body ng-app="katalogApp" layout="column">
<div layout="row" flex>
<md-sidenav md-is-locked-open="true" class="md-whiteframe-4dp leftSideNav" layout="column">
it has a scrollbar
</md-sidenav>
<md-content flex class="content">
content
</md-content>
</div>
</body>