CODEWITHSUNDEEP
cssangularmaterial-designangular-material2
Guille Acosta
Guille Acosta

Reputation: 2222

How can I nest a md-card within md-grid-tile on Angular 2 Material?

I'm following the examples given on https://material.angular.io/components and trying to put "X" number of cards in a same "row". To accomplish that, I nested a md-card within md-grid-tile.

Here is a plunker of what I'm doing https://plnkr.co/edit/S8QkPOT8o34jWCO85S8P?p=preview

If figured out that md-grid-tile has a overflow:hidden css rule, if I change it to overflow:visible I can see the entire md-card inside a md-grid-tile

md-grid-tile {
    display: block;
    position: absolute;
    overflow: visible;
}

It's this ok? Or how can I arrange X number of cards in the same "row"? Should I use another approach?

Thanks.

Upvotes: 3

Views: 6367

Answers (2)

mohit uprim
mohit uprim

Reputation: 5334

I am able to achieve it using nested md-card within md-grid-tile. The problem was the property "align-items: center" of .mat-figure. Here is my solution:

**Component:**

import { Component, OnInit } from '@angular/core';

@Component({
  templateUrl: './abc.component.html',
  styleUrls: ['./abc.component.css']
})
export class AbcComponent implements OnInit {
  ngOnInit() {

  }

  tiles = [
    {text: 'One', cols: 1, rows: 1, color: 'lightblue'},
    {text: 'Two', cols: 1, rows: 1, color: 'lightgreen'},
    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
    {text: 'Four', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: 'Five', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: 'Six', cols: 1, rows: 1, color: '#DDBDF1'},
  ];

}

**abc.component.html file content:**

<md-grid-list cols="3">
  <md-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">

    <md-card class="square_board">HI</md-card>
  </md-grid-tile>
</md-grid-list>

**abc.component.css file content:**

.square_board{
  margin: 10px;
  width: 100%;
}

::ng-deep md-grid-tile.mat-grid-tile .mat-figure {
    align-items: initial;  /*vertical alignment*/
}

Here is the result: enter image description here

The benifit of this approach is that we don't have to care about the spacing and placement of cards.

Upvotes: 1

Guille Acosta
Guille Acosta

Reputation: 2222

You shouldn't nest a md-card inside md-grid-tile or any other.

To achieve a desing like this: enter image description here

You just have to set a correct width to md-card, by default md-card is set to 100%. Here is a plunker https://plnkr.co/edit/R7mhv59gAG6bZRbEuNKe?p=preview to see two md-card on the "same row" using this css rule:

.example-card {
    display: inline-block;
    width: 30%;
    margin: 20px;
    vertical-align: top;
    cursor: pointer;
}

Upvotes: 9

Related Questions