angularjs - 如何在布局内水平滚动= Angular Material 中的行

标签 angularjs layout scroll flexbox angular-material

我正在尝试制作一个只有水平滚动条的 slider ,里面有卡片,所以为了实现这一点,我试图在里面滚动 layout="row",里面有 ng-repeat

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>

不知道哪里错了

谢谢

最佳答案

要滚动才能正常工作,您需要为卡片提供最小宽度。

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

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

这里是更新的codepen的链接

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

关于angularjs - 如何在布局内水平滚动= Angular Material 中的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44214415/

相关文章:

javascript - Angular 窗口.onbeforeunload

html - 如何在输入元素下显示搜索结果列表?

delphi - 如何使用TControl.Align := alCustom?

html - 基本 CSS/布局问题 - 动态列?

html - 防止滚动拉动超出 iOS 元素的范围

jquery - AngularJS - ui-sortable - 如何禁用对可排序列表中的一项进行排序?

javascript - 如何在 ng-table 选择过滤器上放置占位符文本?

jquery - 页面滚动技术/过渡-如何

windows - Git bash 不断自动滚动到窗口底部

Angular js中的HTML到Pdf转换