2016-08-05 4 views
0

divの高さが設定されています。私はGoogleマテリアルの列でdivを設定してから、コンテンツの行を追加しています。Googleマテリアル - 高さが設定されたスクロールdiv

私の問題はこれです:

私は一定の高さに、コンテナのdivを設定しない場合、その後のdivはスクロールできません - オーバーフローの内容は単純に示されていません。

コンテナを固定高さに設定すると、行が一緒に押し込まれてそのスペースに収まるため、書式設定が失われます。

これは非常に簡単であるはずです。私は以下のコードで私が持っているmd-content要素を埋め込むべきであると答えています。これは重要な文書によってぶとされています。どんな助けもありがとうございます。

<md-content> 

    <md-content> 

     <div layout="column" flex="100"> 

      <div layout="row" flex="100" layout-margin > 

       row content 

      </div> 

      <div layout="row" flex="100" layout-margin > 

       row content 

      </div> 

      <div layout="row" flex="100" layout-margin > 

       row content 

      </div> 

     </div> 

    </md-content> 

</md-content> 

答えて

0

は、あなただけのインナーdiv秒間flex="none"を設定する必要があります -

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp"> 
    <md-content> 
     Scrolling: 
     <md-content> 
      <div layout="column" style="height:50px; background:yellow; overflow:auto"> 
       <div layout="row" flex="none" layout-margin style="color:red"> 
        row content 
       </div> 
       <div layout="row" flex="none" layout-margin style="color:blue"> 
        row content 
       </div> 
       <div layout="row" flex="none" layout-margin style="color:green"> 
        row content 
       </div> 
      </div> 
     </md-content> 
     <br> 
     Basic: 
     <md-content> 
      <div layout="column"> 
       <div layout="row" flex="100" layout-margin style="color:red"> 
        row content 
       </div> 
       <div layout="row" flex="100" layout-margin style="color:blue"> 
        row content 
       </div> 
       <div layout="row" flex="100" layout-margin style="color:green"> 
        row content 
       </div> 
      </div> 
     </md-content> 
    </md-content> 
</div> 
+0

感謝をdocs

enter image description here

マークアップからCodePen

、これは働いていました。埋め込みmd-contentタグを使用する妥当性についてのコメントはありますか?何をすべきか他の理想は? –

+0

@ JoshuaFoxworthドキュメントによると - https://material.angularjs.org/latest/api/directive/mdContent- "一般的に、 ''コンポーネントは互いに入れ子になるようには設計されていません。入れ子になっているスクロールバーでユーザーを混乱させる可能性があるため、ユーザーエクスペリエンスが向上することがあります。私は通常、すべての要素を入れ、要素をグループ化するためにdivを使用する 'md-content 'を1つ持っています。希望が役立ちます。 –

関連する問題