CODEWITHSUNDEEP
cssangularjsangularjs-material
Marcus Edensky
Marcus Edensky

Reputation: 944

AngularJS Material - Disable scroll of both md-sidenav and md-content

I'm building a site with AngularJs Material sidenav. I'd like both md-sidenav and md-content to be as 1 page, without having scrollers appear when the content of one of the elements has more height than the other. How can this be achieved? Here's the HTML:

<div class="content" layout="column" style="height: 100%;">
    <section layout="row" flex>
    <md-sidenav
        class="md-sidenav-left"
        md-component-id="left"
        md-is-locked-open="$mdMedia('gt-md')"
        md-whiteframe="4">

        <md-toolbar class="md-theme-indigo">
            <h1 class="md-toolbar-tools">Sidenav Left</h1>
        </md-toolbar>
        <md-content layout-padding ng-controller="LeftCtrl">
            <p hide show-gt-md>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
            </p>
        </md-content>
    </md-sidenav>


    <md-content flex layout-padding style="overflow: unset;">

    <div layout="column" layout-align="top center" style="height: 100%;">
        <p>The left sidenav will 'lock open' on a medium (>=960px wide) device.</p>

        <div>
            <md-button ng-click="toggleLeft()"
                class="md-primary" hide-gt-md>
                Toggle left
            </md-button>
        </div>
    </div>

    <div flex></div>
    </md-content>
    </section>
</div> <!-- end .content -->

Upvotes: 0

Views: 798

Answers (1)

Zooly
Zooly

Reputation: 4787

You can use position property.

sidenav > md-sidenav, sidenav > md-backdrop {
    position: fixed !important;
}

Upvotes: 1

Related Questions