0

I have md-grid-list which contains cards. I have set the number of columns to 4 in the grid-list. When I resize the browser window, the grid list will not resize according to the browser window and contents in the card gets overlapped and looks ugly. How do I set the grid-list to display dynamically according to the browser window size? Or How to set the number of cards in the grid according to the browser window size?

<md-grid-list cols="4" md-cols-sm="2" md-cols-md="4" md-cols-lg="8" md-cols-gt-lg="12"  rowHeight="250px" gutterSize="20px">
  <md-grid-tile  *ngFor="let data of myData">
      <md-card [style.background]="'lightBlue'" [style.minHeight]="'100%'" >    
    <md-card-title></md-card-title>
    <md-card-title></md-card-title>
    <md-card-content>
    <h2>    
    </h2>
    </md-card-content>  
    </md-card>
  </md-grid-tile>
</md-grid-list>
user2301
  • 1,857
  • 6
  • 32
  • 63

1 Answers1

1

The directives like md-cols-sm are not valid for md-grid-list for your angular veresion. Please have a look at this for more details : Angular 2 md-grid-list

You can use flexbox layout by angular (dzurico.com/angular-flex-layout , github.com/angular/flex-layout/wiki/Responsive-API) or write your own css class to implement the flexbox.

Shruti Agarwal
  • 887
  • 2
  • 14
  • 29
  • Thank you.I tried to install flex layout and i get this error message. Could you please help me ? I installed flex layout using "npm install @angular/flex-layout" . After installation, I get this typescript error message. "node_modules/@angular/core/index"' has no exported member 'Renderer2'." "node_modules/@angular/core/index"' has no exported member 'InjectionToken'." – user2301 May 11 '17 at 10:51
  • Did you get the error after installing flexbox? Can you please try installing flex layout again following steps in this link : https://alligator.io/angular/flex-layout/ – Shruti Agarwal May 11 '17 at 18:07
  • I figured out that latest version of @angular/flex-layout will require Angular v4.x and will not be compatible with Angular v2.x from this link https://github.com/angular/flex-layout/blob/master/CHANGELOG.md – user2301 May 12 '17 at 07:12
  • You can still import it and use. I am using it with Angular 2. – Shruti Agarwal May 15 '17 at 18:08
  • Good to know it worked. You can accept it as answer to help others facing the same issue. – Shruti Agarwal May 16 '17 at 07:50