我正在使用Angular Material网格列表来显示大约500-1000个项目.我无法按照自己的喜好设计风格.以下是网格列表现在的样子:
<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" md-row-height="16:9" md-gutter="12px" md-gutter-gt-sm="8px"> <md-grid-tile ng-repeat="orgOrder in vm.orgOrders | filter: query1" style="background: #f5f5f5" layout-align="center center" ng-click="vm.addOrder(orgOrder)"> <div layout="column"> <div> {{orgOrder.orderNumber}}</div> <!--<div> {{orgOrder.reqExFact | date : 'dd/MM/yyyy'}}</div>--> </div> </md-grid-tile> </md-grid-list>
这是我想做的事情:
>我的网格标题(项目)对于单行而言太大了,如何使我的网格标题适合其中的数据?设置md-row-height =“fit”使它看起来像这样.
>目前我的网格列表有几个’滚动’长.我想将它放入一个容器中并添加一个滚动条.在md-container中对我的网格列表或网格标题进行变形会将其高度设置为0.
如果您需要查看我的更多代码,请告诉我们.
这是一个类似于我的代码的jsfiddle:https://jsfiddle.net/rakshak/6tjgbb85/
我希望网格标题(项目)适合它们中的文本,我想在整个网格列表中包装一个容器,并有一个溢出滚动条而不是整个窗口滚动.
解决方法
设置md-row-height如md-row-height =“20px”或md-row-height =“30px”似乎很好地解决了高度问题.将网格嵌套在固定高度div中定义如下:
.tileContainer {display:block; width:100%; height:100px;}
将为您提供磁贴的滚动条.
我在这里分叉你的傻瓜:https://jsfiddle.net/uegLh6t4/