CODEWITHSUNDEEP
cssangularjsangular-material
dman
dman

Reputation: 11064

Angular material md-content uses it's own Y scroll bar

Using Angular 1.* and angular-material.

I am having a issue with views that plug into <div ng-view></div> and md-content. If the height of the view is larger than the view port. It creates it's own Y scroll bar, so then I have 2 Y-scroll bars next to each other.

I can do overflow-y: hidden on the md-content. But how can I make it to where the view pushes the viewport horizontally so the outer scroll bar is used only?

<body ng-app="app">
     <md-toolbar class='md-medium-tall'>
       <div class="main-title">
         <img src="./images/yo-small.png">
         <p class="top-title">foo</p>
         <h5>Bar</h5>
       </div>
     </md-toolbar>

     <div class="menu-container" layout="row">
        <md-sidenav
          md-is-locked-open="$mdMedia('min-width: 900px')" 
          class="md-sidenav-left"
          md-whiteframe="0">

          <md-menu-content>
            <md-menu-item>
              <md-button href="#ppv">
                <md-icon class="material-icons" menu-align-target="">assessment</md-icon>
                  PPV</md-button>
            </md-menu-item>
          </md-menu-content>

        </md-sidenav>

        <md-content>
          <div ng-view></div>
        </md-content>
     </div>
  </body>

<div style="height: 1000px; width: 800px ">
  <h1>mom</h1>
</div>

enter image description here

UPDATE: I was able to create a hack to fix this. Can anyone see how to make this work as it should?

md-content {
  overflow-y: hidden;
}

angular.module('app')
  .controller('PPVCtrl', ['$scope', function($scope) {


    // fix for angular-material responsive issue
    document.body.style.height = "800px";
    $scope.$on('$destroy', function() {
      document.body.style.height = "100%";
    });
  }]);

Upvotes: 1

Views: 2653

Answers (1)

JacobPariseau
JacobPariseau

Reputation: 195

This is actually intended behaviour. The mdContent directive is defined as a block element for scrollable content with its own scrollbar, and should only be used where you want nested scrolling to occur. Common usage is in dialogs, sidebars, and bottom sheet elements.

https://material.angularjs.org/latest/api/directive/mdContent

Upvotes: 1

Related Questions