Kątowy materiał sidenav i ustalony pasek narzędzi

Question

Skopiowałem to demo sidenav z kątowych dokumentów materiałowych. https://material.angularjs.org/latest/demo/sidenav

I dodał pierwsze demo paska narzędzi do niego z https://material.angularjs.org/latest/demo/toolbar

Co chcę jest pasek narzędzi, który zostanie ustalony.

Codepen demo: http://codepen.io/gvorster/pen/BzWvGe

Dodając ten styl pasek narzędzi jest stała.

<md-toolbar class="md-hue-2" style="position:fixed !important"> 

Ale ikony po prawej stronie zniknęły.

Zmiana rozmiaru ekranu aż sidenav jest ukryty pokaże odpowiednie ikony ubocznych.

Usuwanie stylu pokazuje odpowiednie ikony uboczne ale pasek narzędzi nie jest ustalona:

Czy istnieje sposób, aby uzyskać lepki pasek i mieć rigth ikony boczne pokazane.

Answer 1

Musisz użyć md-sidenav wewnątrz kontenera md-content. Dodatkowo spróbuj użyć md-content zamiast tagu div. W twoim przykładzie podałeś nieprawidłowe wartości do atrybutu layout-align. Proszę sprawdzić odpowiednie wartości w Docs.

Oto podstawowa struktura dla twojego wymagania.

<md-content flex> 
    <md-toolbar> 
    </md-toolbar> 

    <md-content layout="column" layout-fill> 
     <!-- content --> 

     <md-sidenav> 
     </md-sidenav> 
    </md-content> 
</md-content> 

oto pióro robocze. http://codepen.io/next1/pen/xOqMjy

Answer 2

Należy dodać układy dla wszystkich kontenerów i przesunąć pasek narzędzi z treści md, które należy przewinąć.

<div layout="row" flex> 
<md-sidenav></md-sidenav> 
<div layout="column" flex> 
    <md-toolbar></md-toolbar> 
    <md-content></md-content> 
</div> 
<md-sidenav></md-sidenav> 
</div> 

Oto demo robocze: http://codepen.io/anon/pen/EyWJKK?editors=1010