在角2材料的md-grid-list中使用md卡

我是角2材料设计的新手。我试图实现的是使用angular2材质创建网格列表，并将md-cards放置在md-grid-tile中。虽然md卡有位置：相对，但它们正在满足md-grid-tile。 click this link, the cards are overlapping and they are overflowing the md-grid-tile in a md-grid-list 在角2材料的md-grid-list中使用md卡

以下是我所使用的代码：

<body> 
    <md-toolbar layout="row"> <md-button class="menu"> 
    <md-icon md-svg-icon="menu"></md-icon> </md-button> 
    <h3>Pipeline UI</h3> 
    </md-toolbar> 

    <md-grid-list cols="2" rowHeight="2:1" gutterSize="15px"> 
     <md-grid-tile layout-wrap *ngFor="let item of releaseType"> 
      <md-card flex layout-fill> 
       <md-card-header>test1</md-card-header> 
       <md-card-content> 
      <stage [init]="item.submissions"></stage></md-card-content> 
      </md-card> 
     </md-grid-tile> 
    </md-grid-list> 
</body>

任何有助于解决这一极为赏识:)

来源

2016-08-12 powerranger

从我想通了，md-grid-tile创建另一个DOM元素中称为figure和它的一个css规则是。我用过：

md-grid-tile figure { 
    align-items: flex-start!important; 
}

来源

2016-09-30 19:49:51 tzoeov

我曾尝试将此css snipet添加到app.component.css（使用app.component显示我的网格ATM）。而且不幸的是它不起作用。你有哪些风格定义？顺便说一句 - 此修补程序直接在Chrome调试器中应用时可以工作。 – Arnaud

css规则位于另一个自定义css文件中。自定义规则/文件必须在默认的角度材质样式之后加载，因为当存在具有相同“特定级别”的多个规则时，最后出现的规则会胜出。 – tzoeov

在角2材料的md-grid-list中使用md卡

回答

相关问题