CODEWITHSUNDEEP
htmlcssangularresponsive-designangular-material2
Ke Vin
Ke Vin

Reputation: 3750

How to add padding in md-card in angular2 material?

How to add padding in md-card in angular2 material? i am using md-card to showing my product list, but i can't add padding on them, here is what i do :

product.component.html :

<p>
  Product List
</p>

<div class="container">
  <div class="col-sm-2 filter-area">
    <div>Filter area</div>
    <div>Search area</div>
    <div>Category area</div>
    <div>Widget area</div>
  </div>
  <div class="col-sm-10">
    <md-card class="example-card" *ngFor="let data of (myData ? myData.slice(0,5): []); let i = index">

        <img md-card-image src="{{ data.url }}">
        <md-card-header>
          <md-card-title>{{ data.title }}</md-card-title>
        </md-card-header>

        <md-card-actions>
          <button md-button>Add to Cart</button>
          <button md-button>Buy Now</button>
        </md-card-actions>

      </md-card>
  </div>
</div>

and here is my product.component.ts :

  myData: Array<any>;

  constructor(private http:Http) {
    this.http.get('https://jsonplaceholder.typicode.com/photos')
      .map(response => response.json())
      .subscribe(res => this.myData = res);
  }

that's how i showing my JSON data, it's a sample JSON data that i use to prototype my design. Below is 5 json data that i use (if you trigger the url in my constructor it should appear like below) :

[

    {
        "albumId": 1,
        "id": 1,
        "title": "accusamus beatae ad facilis cum similique qui sunt",
        "url": "http://placehold.it/600/92c952",
        "thumbnailUrl": "http://placehold.it/150/92c952"
    },
    {
        "albumId": 1,
        "id": 2,
        "title": "reprehenderit est deserunt velit ipsam",
        "url": "http://placehold.it/600/771796",
        "thumbnailUrl": "http://placehold.it/150/771796"
    },
    {
        "albumId": 1,
        "id": 3,
        "title": "officia porro iure quia iusto qui ipsa ut modi",
        "url": "http://placehold.it/600/24f355",
        "thumbnailUrl": "http://placehold.it/150/24f355"
    },
    {
        "albumId": 1,
        "id": 4,
        "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
        "url": "http://placehold.it/600/d32776",
        "thumbnailUrl": "http://placehold.it/150/d32776"
    },
    {
        "albumId": 1,
        "id": 5,
        "title": "natus nisi omnis corporis facere molestiae rerum in",
        "url": "http://placehold.it/600/f66b97",
        "thumbnailUrl": "http://placehold.it/150/f66b97"
    }
]

and here is my css file, product.component.css :

.example-card {
    width: 220px;
    float: left;
    padding: 30px;
  }

.filter-area {
    background-color: peachpuff;
}

and here is my application screenshot : enter image description here

how to add the padding there?

Upvotes: 0

Views: 2730

Answers (2)

heysulo
heysulo

Reputation: 182

Put your cards inside a div and add paddings to the class. Use firstchild and lastchild as necessary to create CSS classes. Dont use inline css like i did here.

<div layout="column" style="padding : 10px;">
  <md-card>Simple card</md-card>
</div>
<div layout="column" style="padding : 10px;">
  <md-card>Simple card</md-card>
</div>
<div layout="column" style="padding : 10px;">
  <md-card>Simple card</md-card>
</div>

Upvotes: 0

Vignesh
Vignesh

Reputation: 2386

For md-card can't apply padding. So create div and apply padding.

<div class="col-md-10"> 
    <md-card>
        <div class="example-card" style="background-color: #40DEC8;">
            <img md-card-image src="{{ data.url }}">
        <md-card-header>
          <md-card-title>{{ data.title }}</md-card-title>
        </md-card-header>

        <md-card-actions>
          <button md-button>Add to Cart</button>
          <button md-button>Buy Now</button>
        </md-card-actions>
        </div>
        <!-- Other html -->
    </md-card>
</div>

Upvotes: 1

Related Questions