2016-10-25 4 views
0

角度1. *と角材料を使用します。角材md-contentは、それ自身のYスクロールバーを使用します。

<div ng-view></div>md-contentに接続するビューに問題があります。ビューの高さがビューポートより大きい場合それはそれ自身のYスクロールバーを作成するので、2つのYスクロールバーが隣にあります。

md-contentoverflow-y: hiddenを実行できます。しかし、ビューがビューポートを水平に押して、外側のスクロールバーだけが使用される場所にするにはどうすればいいですか?

<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:私はこの問題を解決するためのハックを作成することができました。誰もがこの仕事をする必要があるようにする方法を見ることができますか?

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%"; 
    }); 
    }]); 
+0

内部のmdコンテンツのレイアウトフィルで試してみてください –

答えて

0

これは実際に意図された動作です。 mdContentディレクティブは、独自のスクロールバーを持つスクロール可能なコンテンツのブロック要素として定義されており、ネストされたスクロールが発生する場所でのみ使用する必要があります。よく使われるのは、ダイアログ、サイドバー、ボトムシートの要素です。

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

関連する問題