Angular 2素材のmd-grid-listでmd-cardsを使用しています

角度2の素材デザインが初めてです。私が達成しようとしているのは、angular2マテリアルを使用してグリッドリストを作成し、md-grid-tile内にmdカードを配置することです。 MDカードはposition：relativeを持っていますが、md-grid-tileがあふれています。続き click this link, the cards are overlapping and they are overflowing the md-grid-tile in a md-grid-list Angular 2素材のmd-grid-listでmd-cardsを使用しています

私が使用しているコードです：

<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はfigureと呼ばれる別のDOM要素内に作成されますそのCSS規則の1つはです。私は使用しました：

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

出典

2016-09-30 19:49:51 tzoeov

私はこのcssスニペットをapp.component.cssに追加しようとしました（app.componentを使用してグリッドATMを表示しています）。そして残念ながらそれはうまくいきません。スタイルはどこで定義されていますか？ BTW - この修正は、クロムデバッガに直接適用すると機能します。 – Arnaud

CSSルールは別のカスタムCSSファイルにあります。カスタムルール/ファイルは、既定の角度のマテリアルスタイルの後にロードする必要があります。同じ「特殊性レベル」の複数のルールが存在する場合、最後に表示されるルールが勝つからです。 – tzoeov

Angular 2素材のmd-grid-listでmd-cardsを使用しています

答えて

関連する問題