CODEWITHSUNDEEP
angularangular-material2angular2-material
Christoforus Surjoputro
Christoforus Surjoputro

Reputation: 558

Angular 2 material: Make cards in one line

I made a simple code here http://embed.plnkr.co/INpybaat2XZqdStsKAdy/. The cards didn't rendered in one line. How to make it rendered in one line? Thank you.

Upvotes: 1

Views: 8422

Answers (2)

JayChase
JayChase

Reputation: 11525

You can use a flexbox as the container for the cards.

<div id="card-container">
    <md-card class="short">
        <md-card-title-group>
        <img md-card-sm-image src="https://image.freepik.com/free-photo/blue-surface-with-creases_1160-191.jpg">
        <md-card-title>Hi</md-card-title>
        <md-card-subtitle>Have a nice day</md-card-subtitle>
        </md-card-title-group>
    </md-card>
    <md-card>
        <md-card-title-group>
        <img md-card-sm-image src="https://image.freepik.com/free-photo/blue-surface-with-creases_1160-191.jpg">
        <md-card-title>One</md-card-title>
        <md-card-subtitle>Is the first order in numeric</md-card-subtitle>
        </md-card-title-group>
    </md-card>
</div>

and for app.component.css

md-card {
max-width: 150px;
margin: 4px;
}

#card-container {
display: flex;
    flex-flow: row wrap;
}

https://plnkr.co/edit/V0pegO?p=preview

Upvotes: 2

eugene
eugene

Reputation: 550

try float: left; in md-card css file. Like this: https://plnkr.co/edit/INpybaat2XZqdStsKAdy?p=preview

Upvotes: 6

Related Questions