CODEWITHSUNDEEP
angularangular-material
e kanojia
e kanojia

Reputation: 97

angular 2 material grid list with card

I am facing issue in angular 2 material grid list with cards.

I want to display cards inside grid list but it is not responsive

Here is the code:

<md-grid-list cols="4">
  <md-grid-tile *ngFor="let card of cards">
    <md-card>
      <img md-card-image src="{{card.image}}">
      <md-card-content>
        {{card.content}}
      </md-card-content>
    </md-card>
  </md-grid-tile>
</md-grid-list>

Upvotes: 4

Views: 9622

Answers (3)

Parmeshwar C
Parmeshwar C

Reputation: 459

Use Following code in the component.ts file 

ngOnInit() {
        this.event1 = this.event2 = this.event3 = new EventListComponent();
        this.columns =
          (window.innerWidth <= 400) ? 1
            : (window.innerWidth <= 600) ? 2
            : (window.innerWidth <= 800) ? 3 : 4;
      }
      onResize(event) {
        this.columns =
          (window.innerWidth <= 400) ? 1
            : (window.innerWidth <= 600) ? 2
            : (window.innerWidth <= 800) ? 3 : 4;
      }

and use "columns" varialble in your HTML file. like

<mat-grid-list
[cols]="columns"

(window:resize)="onResize($event)">

Upvotes: 1

Isurendrasingh
Isurendrasingh

Reputation: 432

Try changing this

<md-grid-list cols="4">

To

<md-grid-list cols="4" rowHeight="500px" gutterSize="10px">

Upvotes: -1

ChrisEenberg
ChrisEenberg

Reputation: 793

I don't have the reputation to comment so i'll write it as an answer - sorry about that.

You have to be careful setting a fixed width when wanting a responsive view. Try removing the width off of your view, and see what happens. Preferably set your width with flex. Also if you are using material design, they suggest using fxFlex with their design as pr documentation under layout here - link to fxFlex

Upvotes: 1

Related Questions