角度2と角度のある材質のMDカードの全内容を見ることができません

Question

私はリストにMDカードを入れようとしていますが、カードの内容を表示するとタイトルとサブタイトルしか表示されません。私のhtmlコードが見えます

<md-nav-list> 
    <md-list-item *ngFor="let contact of contacts" fxLayout="column"> 
    <md-card class="card-class"> 
     <md-card-header> 
     <div md-card-avatar class="sample-image"></div> 
     <md-card-title>{{contact.name}}</md-card-title> 
     <md-card-subtitle>{{contact.email}}</md-card-subtitle> 
     </md-card-header> 
     <img md-card-image="../assets/image.jpg"> 
     <md-card-content> 
     <p>Address: {{contact.address}}</p> 
     <p>Phone Number: {{contact.phoneNumber}}</p> 
     </md-card-content> 
     <md-card-actions> 
     <button md-button>EDIT</button> 
     </md-card-actions> 
    </md-card> 
    </md-list-item> 
</md-nav-list> 

のような関連するCSSが

.card-class{ 
    width: 600px; 
} 

.sample-image{ 
    background-image: url('../../assets/image.jpg'); 
    background-size: cover; 
} 

私はそれがカードの内容を切断されたロードしようとしていたとき、私は完全な幅を取り、すべてを表示するには、カードを望んでいます。

リストの最後に、それはすべてのものを示しています。

Answer 1

それはあなたが、クラスマット・リスト項目-内容を上書きし、必要なサイズに高さを変更する必要があり、CSSの問題です。

.mat-list-item-content{ 
    height:180px; 
}