設計一個md-grid-list

我正在使用一個Angular Material網格列表來顯示500到1000個左右的項目。我有一些麻煩，我喜歡它的樣式。這裏是網格列表的樣子現在：設計一個md-grid-list

<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容器中將其高度設置爲0.

如果您需要查看更多我的代碼，請告訴我。

這裏是一個的jsfiddle類似我的代碼：https://jsfiddle.net/rakshak/6tjgbb85/

我想網格標題（項目），以適應他們的文字，我想環繞整個網格列表中的容器，並有溢出滾動條代替整個窗口滾動。

來源

2016-05-31 DrkStr

創建的jsfiddle將是解決你的問題非常有幫助的，你可以發佈一個嗎？我可以想到幾個解決方案，但我想看看你明確詢問的具體內容 – Jay

添加了一個類似於我的代碼的jsfiddle。 – DrkStr

設置md-row-height像md-row-height="20px"或md-row-height="30px"似乎很好地解決了高度問題。嵌套在固定高度div內的網格定義如下：

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

會給你一個瓷磚的滾動條。

我叉你plunker這裏：https://jsfiddle.net/uegLh6t4/

來源

2016-06-13 17:52:56

我是新的Web開發人員，正在設置固定值，如md-row-height =「20px」和height：100px;一個好主意？我希望有一些方法來設定相對價值。 – DrkStr

行高必須適應您的文本。將它設置爲固定的高度並沒有錯。您可以根據％設置div高度，或者根據設備將其設置爲不同的固定高度。 –

設計一個md-grid-list

回答

相關問題