Daniel Dzussa Daniel Dzussa - 4 months ago 49
AngularJS Question

angular material right side bar issue

see this angular material demo at http://codepen.io/joyal/pen/mPpGBK

<div ng-controller="AppCtrl" layout="column" style="height:500px;" class="sidenavdemoBasicUsage" ng-app="MyApp">
<md-toolbar layout="column" class="main-toolbar md-medium-tall">
<span flex="flex">
<h1 class="md-toolbar-tools">Good luck overlapping me, sidenavs</h1>
</span>
</md-toolbar>
<section layout="row" flex="">

<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">

<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Sidenav Left</h1>
</md-toolbar>
<md-content layout-padding="" ng-controller="LeftCtrl">
<md-button ng-click="close()" class="md-primary" hide-gt-md="">
Close Sidenav Left
</md-button>
<p hide-md="" show-gt-md="">
This sidenav is locked open on your device. To go back to the default behavior, narrow your display.
</p>
</md-content>

</md-sidenav>

<md-content flex="" layout-padding="">

<div layout="column" layout-fill="" layout-align="top center">
<p>
The left sidenav will 'lock open' on a medium (&gt;=960px wide) device.
</p>
<p>
The right sidenav will focus on a specific child element.
</p>

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

<div>
<md-button ng-click="toggleRight()" class="md-primary">
Toggle right
</md-button>
</div>
</div>

<div flex=""></div>

</md-content>
<div layout="row">
<!--This is new-->
<md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">

<md-toolbar class="md-theme-light">
<h1 class="md-toolbar-tools">Sidenav Right</h1>
</md-toolbar>
<md-content ng-controller="RightCtrl" layout-padding="">
<form>
<md-input-container>
<label for="testInput">Test input</label>
<input type="text" id="testInput" ng-model="data" md-sidenav-focus="">
</md-input-container>
</form>
<md-button ng-click="close()" class="md-primary">
Close Sidenav Right
</md-button>
</md-content>

</md-sidenav>
</div>
</section>

</div>


If you open the left side bar, it opens smoothly but if you open the right side bar, while opening and closing, a scroll bar appears on the page (horizontal scroll bar in the main content area).

How can I update the page so that right side bar opens and closes like left side bar (smoothly without scroll bar on content area)

Answer

You can use the overflow: hidden in your body, but it may effect to other component(s). Try this:

#sideNavContainer
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

Hope this help.