Reputation: 536
I want to design a page just like the official angular-material website . The toolbar and side nav is fixed while the main content scrolls . I am trying to do that for few hours but haven't been got any success . here is my html template for profile profile.html
<div layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z2 profileSidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
<md-toolbar layout="row" class="md-hue-2">
<h1 class="md-toolbar-tools" layout-align-gt-sm="center">Hello World</h1>
</md-toolbar>
<md-content>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
</md-content>
</md-sidenav>
<div layout="column" flex>
<md-toolbar layout="row" class="profileToolBar">
<button ng-click="toggleSidenav('left')" hide-gt-sm>
<span class="visually-hidden">Menu</span>
</button>
<h1 class="md-toolbar-tools">Hello World</h1>
</md-toolbar>
<md-content layout="column" flex class="md-padding">
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
</md-content>
</div>
</div>
sidenav and toolbar has been given custom class with position:fixed ; values , but after making position fixed for sidenav the toolbar and content hides behind it
Upvotes: 2
Views: 3706
Reputation: 540
you can ise $mdSticky to make element fixed
app.directive('sticky', function($mdSticky, $compile) {
var SELECT_TEMPLATE =
'<md-content><md-card layout="column"> <md-card-content> <h2>Card headline</h2> <p>Card content</p> </md-card-content> <md-card-footer> Card footer </md-card-footer> <div class="md-actions" layout="column"> <md-button>content</md-button> </div> </md-card> <md-card layout="column"> <md-card-content> <h2>Card headline</h2> <p>Card content</p> </md-card-content> <md-card-footer> Card footer </md-card-footer> <div class="md-actions" layout="column"> <md-button>content</md-button> </div> </md-card> </md-content>';
return {
restrict: 'A',
replace: true,
//template: SELECT_TEMPLATE, // you can use template HTML or load HTML with templateURL as we do it in next line
templateUrl:appInfo.template_directory+'templates/sticky-sidebar.directive.html',
link: function(scope,element) {
$mdSticky(scope, element, $compile(SELECT_TEMPLATE)(scope));
}
};
});
as described here: https://www.coditty.com/code/angular-material-how-to-make-custom-elements-sticky-using-mdsticky
Upvotes: 1
Reputation: 885
Use this attribute md-is-locked-open="true"
on <md-sidenav>
tag.
Upvotes: 0
Reputation: 320
I solve it with this code:
index.html:
<body layout="column">
<div flex layout="column" ng-include="'app/layout/shell.html'"></div>
</body>
shell.html
<div layout="row" flex style="height: inherit; overflow: hidden; background-color: transparent" ng-controller="Shell" layout-fill class="fondo">
<div ng-include="'app/layout/left-side-nav.html'"></div>
<md-content flex layout="column" role="main" style="height: inherit; background-color: transparent; " class="">
<div ng-include="'app/layout/app-toolbar.html'"></div>
<div layout="row" layout-align="space-around" ng-if="dataLoading.init" class="loader">
<md-progress-circular class="md-accent" md-mode="indeterminate"></md-progress-circular>
</div>
<md-content flex style="background-color: transparent; flex-direction: column;" ng-hide="dataLoading.init" >
<div ui-view="main" class="noscrollbar" style=" margin:auto"></div>
</md-content>
</md-content>
<div ng-include="'app/layout/right-side-nav.html'"></div>
</div>
Upvotes: 0