CODEWITHSUNDEEP
javascriptcssangularjsangularjs-directiveangular-material
Amit Singh
Amit Singh

Reputation: 1800

Angular Material Sidenav Not covering full screen on Scroll

On scroll, Sidenav is not taking 100% of the screen and it's also scrolling.

<div layout="column">
    <section layout="row" flex>
        <!-- sidenav content -->
        <md-sidenav class="md-sidenav-left"
                    md-component-id="left"
                    md-whiteframe="20"
                    flex>
            <md-content layout-padding></md-content>
        </md-sidenav>
        <md-content flex layout-padding>
            <!-- page content -->
            <md-content>Page Content</md-content>
        </md-content>
    </section>
</div>

Upvotes: 0

Views: 971

Answers (1)

Edric
Edric

Reputation: 26710

Simply place the md-sidenav outside of the div:

<!-- sidenav content -->
<md-sidenav class="md-sidenav-left"
    md-component-id="left"
    md-whiteframe="20"
    flex>
    <md-content layout-padding></md-content>
</md-sidenav>
<div layout="column">
    <section layout="row" flex>
        <md-content flex layout-padding>
            <!-- page content -->
            <md-content>Page Content</md-content>
        </md-content>
    </section>
</div>

Codepen Demo

Upvotes: 1

Related Questions