造型 md-grid-list

Question

我正在使用 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" 使其看起来像这样。
目前我的 grid-list 有几 'scrolls' 长。我想把它放进一个容器里，然后给它加一个卷轴。在 md-container 中扭曲我的 grid-list 或网格标题将它们的高度设置为 0。

如果您需要查看我的更多代码，请告诉我。

这是一个类似于我的代码的 jsfiddle：https://jsfiddle.net/rakshak/6tjgbb85/

我希望网格标题（项目）适合其中的文本，我想在整个网格列表周围包装一个容器，并有一个溢出滚动条而不是整个 window 滚动。

Answer 1

像 md-row-height="20px" 或 md-row-height="30px" 那样设置 md-row-height 似乎可以很好地解决高度问题。将网格嵌套在固定高度内 div 定义如下：

.tileContainer {display:block;
    width:100%;
    height:100px;}

将为您提供磁贴的滚动条。

我在这里 fork 你的 plunker：https://jsfiddle.net/uegLh6t4/

造型 md-grid-list

Styling a md-grid-list

angular-material