Daniel Dzussa Daniel Dzussa - 1 year ago 128
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>
<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-content layout-padding="" ng-controller="LeftCtrl">
<md-button ng-click="close()" class="md-primary" hide-gt-md="">
Close Sidenav Left
<p hide-md="" show-gt-md="">
This sidenav is locked open on your device. To go back to the default behavior, narrow your display.


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

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

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

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

<div flex=""></div>

<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-content ng-controller="RightCtrl" layout-padding="">
<label for="testInput">Test input</label>
<input type="text" id="testInput" ng-model="data" md-sidenav-focus="">
<md-button ng-click="close()" class="md-primary">
Close Sidenav Right



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 Source

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

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;

Hope this help.