设置md-grid-list的样式 [英] Styling a md-grid-list

问题描述

我正在使用Angular Material网格列表显示大约500-1000个项目.我在按自己的喜好来设计样式时遇到了麻烦.这是网格列表现在的样子:

I am using an Angular Material grid list to display around 500 - 1000 items. I am having some trouble styling it to my liking. Here is what the grid list looks like now:

<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>

这就是我想做的:

1. 我的网格标题(项目)对于一行来说太大了，如何使我的网格标题适合其中的数据?设置md-row-height ="fit"使其看起来像这样.
2. 目前，我的网格列表长有几个滚动".我想将其放入容器中并向其中添加滚动条.在md-container中扭曲我的网格列表或网格标题会将其高度设置为0.

1. My grid titles(items) are a way too big for a single line, how do I make my grid titles fit the data in them? Setting the md-row-height="fit" makes it look like this.
2. At the moment my grid-list is several 'scrolls' long. I would like to put it into a container and add a scroll to it. Warping my grid-list or grid title in an md-container sets their height to 0.

让我知道您是否需要查看更多我的代码.

Let me know if you need to see any more of my code.

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

here is a jsfiddle similar to my code:https://jsfiddle.net/rakshak/6tjgbb85/

我希望网格标题(项目)适合其中的文字，并且我希望将容器包装在整个网格列表周围，并具有一个溢出的滚动条，而不是整个窗口的滚动.

I would like the grid titles(items) to fit the text in them and I would like to wrap a container around the entire grid list and have a overflow scroll bar instead of the entire window scrolling.

推荐答案

设置像md-row-height="20px"或md-row-height="30px"这样的md-row-height似乎很好地解决了高度问题.将网格嵌套在固定高度div内定义如下:

Setting md-row-height like md-row-height="20px" or md-row-height="30px" seems to address the height issues nicely. Nesting the grid inside of a fixed height div defined something like this:

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

将为您提供一个用于磁贴的滚动条.

will give you a scroll bar for the tiles.

我在这里分叉了您的朋克: https://jsfiddle.net/uegLh6t4/

I forked your plunker here: https://jsfiddle.net/uegLh6t4/

这篇关于设置md-grid-list的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！