レイアウト内の水平スクロール方法=角度のある素材の行

私はレイアウトをスクロールしようとしているので、それを達成するために、水平スクロールバーだけでスライダを作ろうとしています。レイアウト内の水平スクロール方法=角度のある素材の行

https://codepen.io/williamscott701/pen/GmLada

<body ng-app="myApp" ng-cloak ng-controller="ProductController"> 
    <md-content class=" md-padding " layout="column "> 
    <div layout="row"> 
     <div flex="33" ng-repeat="y in [1,2,3,4,5,6,7,8,9,10,11] "> 
     <md-card>[ flex = 33 ] 
     <md-card> 
     </div> 
    </div>  
    </md-content> 
</body>

の内側に私はそれはあなたがトンを必要とし、水平スクロールのために間違った

おかげ

出典

2017-05-27 William Scott

スクロールするには、カードに最小幅を指定する必要があります。ここ

md-card { 
    min-width: 200px; 
} 

div[layout="row"] { 
    overflow: auto; 
}

は

https://codepen.io/vibhanshu/pen/YVMbob?editors=1100

codepen更新へのリンクです

出典

2017-05-27 08:17:12 Vibhanshu

を起こっている場所を知らない-repeat要素のコンテンツの幅がその幅よりも大きくなり、そのためにコンテンツの幅になるように番号を決定する必要があります。

<body ng-app="myApp" ng-cloak ng-controller="ProductController"> 
    <md-content class=" md-padding " layout="column "> 
    <div layout="row" style="width: 300vw;"> 
     <div flex ng-repeat="y in [1,2,3,4,5,6,7,8,9,10,11] "> 
     <md-card>[ flex = 33 ] 
      <md-card> 
     </div> 
    </div> 
    </md-content> 
</body>

はまたflex="33"は、すべての親の幅の33%との3つの要素を配置しようとすることに注意してください、それは3つ以上を持っているので、彼らはちょうどようになります。たとえば

（私は300vwを選択しました）それらは均等に幅を埋めるので、flexディレクティブだけで同じ結果が得られます。

出典

2017-05-27 08:09:35

レイアウト内の水平スクロール方法=角度のある素材の行

答えて

関連する問題