0
Ich bin auf der Suche nach einem gesperrten linken Sitenav mit Inhalt auf der rechten Seite, die zusammenfällt und verstecken, wenn in Tablet/Mobile Ansicht. Ich möchte, dass es dieselbe Funktionalität wie die Angular Material doc-Website oder eine ähnliche Funktion wie diese codepen hat. Im Moment wird mein Inhalt nicht rechts von meinem Sitenav angezeigt, wenn es geöffnet ist. Es gibt eine Art Rand, der den Rest des Bildschirms ausfüllt. Wenn ich den Bildschirm verkleinere, so dass der Sitenav klappt, wird der Inhalt angezeigt, ist aber nicht scrollbar.eckigen Material gesperrt md-sidenav nimmt den gesamten Bildschirm
Dies ist, was die Struktur für meine index.html wie folgt aussieht:
<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>
Einsicht würde geschätzt Hilfe /.
versuchen Sie, Layout = "row" zu Ihrem body-Tag hinzuzufügen. – sdfacre
@sdfacre Vielen Dank kann ich nicht glauben, dass ich das nicht gesehen habe <3 –