angular material locked md-sidenav takes up entire screen
Question
I am looking to have a locked left sidenav with content on right that will collapse and hide when in tablet/mobile view. I want it to look/have the same functionality as the Angular Material doc website, or something similar to this codepen . Right now my content won't show to the right of my sidenav when it is locked open, there is some sort of margin taking up the rest of the screen. If I make the screen smaller so the sidenav collapses the content shows up but is not scrollable.
This is what the structure for my index.html looks like:
<body class="docs-body" ng-cloak ng-app="TrooNews" ng-controller="AppController as app">
<md-sidenav
class="site-sidenav md-sidenav-left md-whiteframe-z2"
md-component-id="left" hide-print
md-is-locked-open="$mdMedia('gt-sm')">
<header class="nav-header">
<a ng-href="/" class="docs-logo">
<img src="resources/logo.svg" alt="" />
<h1 class="docs-logotype md-heading">Troo News</h1>
</a>
</header>
<md-content flex role="navigation">
<md-list>
<md-list-item ng-repeat="item in app.menu" ng-click="app.navigateTo(item.link)">
<md-icon>{{item.icon}}</md-icon>
<p>{{item.title}}</p>
</md-list-item>
</md-list>
</md-content>
</md-sidenav>
<div layout="column" tabIndex="-1" role="main" flex>
<md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar">
<div class="md-toolbar-tools docs-toolbar-tools" tabIndex="-1">
<md-button class="md-icon-button" ng-click="app.toggleSidenav('left')" hide-gt-sm aria-label="Toggle Menu">
<md-icon>menu</md-icon>
</md-button>
<div layout="row" flex class="fill-height">
<h2 class="md-toolbar-item md-breadcrumb md-headline">
<span class="md-breadcrumb-page">Test</span>
</h2>
<span flex></span> <!-- use up the empty space -->
<div class="md-toolbar-item" layout="row">
<div class="search">
<md-icon class="search_icon">search</md-icon>
<input ng-model="searchCard">
</div>
</div>
</div>
</div>
</md-toolbar>
<md-content md-scroll-y layout="column" flex>
<div ng-viewport flex="noshrink"></div>
<div layout="row" flex="noshrink">
<div id="license-footer">
Powered by Troo News.
</div>
</div>
</md-content>
</div>
</body>
Any help/insight would be appreciated.
1 answers
solution1
1 ACCPTED 2016-03-24 05:47:53
Check this pen out. http://codepen.io/next1/live/MymXqY You should use layout-fill and layout attrivute as I used in this example.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.