Components: Grid list is not responsive ?

[TitaneBoy]

Bug, feature request, or proposal:

Hi guys. I'm trying to have a collection of cards (on multiple line). So I thought that using a Grid list would do the job. So I've used a grid list with 4 columns. I have something like 22 cards.. But When I'm trying to resize the browser to see the "responsive" side effect, What I see is that cards are just shrinked .. I thought that the number of columns will be reduced until to have just one column.

What is the expected behavior?

When reducing the browser, cards should not be shrinked and should be moved below, on the next row, keeping its size.

What is the current behavior?

Cards are shrinked and contents inside the cards disappear.

What are the steps to reproduce?

my-main-component.html

<md-grid-list cols="4">
  <md-grid-tile *ngFor="let reading of data.value"><rbwc-measurement-card [data]="reading" class="card-border"></rbwc-measurement-card></md-grid-tile>
</md-grid-list>

my-rbwc-measurement-card-component.html:

<md-card class="measurement-card" [style]="setCardAlarmStyle()">
  <md-card-header>
    <div md-card-avatar class="measurement-header-image" [style]=setMeasurementAvatar(data.name)></div>
    <md-card-title class="measurement-bold title-layout">{{data.name}}</md-card-title>
  </md-card-header>
  <md-card-content>
    <div> <span class="measurement-bold">Reading:</span> <span [style]="readingFont()">{{data.reading.value}} {{data.reading.units}}</span></div>
    <div *ngIf="data.trend"><span class="measurement-bold">Trend:</span> <span [style]="trendFont()">{{data.trend.value}} {{data.trend.units}}</span></div>
    <form>
      <fieldset *ngIf="data.limits" class="groupBox-border">
        <legend class="groupBox-text-size">Limits:</legend>
        <div *ngFor="let limit of data.limits">{{limit.name}}: <md-form-field floatPlaceholder="never" [style.width.px]="70"><input mdInput [disabled]="disableEdit()" placeholder="{{limit.name}}" type="number" value="{{limit.value}}"><md-icon [ngClass]="{'md-dark md-inactive': disableEdit()}" mdSuffix>mode_edit</md-icon></md-form-field> <span *ngIf="limit.name != limitsNames.TrendLimit">{{limit.units}}</span> <rbwc-trend-limit-units-options *ngIf="limit.name == limitsNames.TrendLimit" [trendReading]="limit"></rbwc-trend-limit-units-options></div>
      </fieldset>
    </form>
  </md-card-content>
  <md-card-actions>
    <button md-button>LIKE</button>
    <button md-button>SHARE</button>
  </md-card-actions>
</md-card>

Am I missing something or doing something wrong ? Thank you in advance for your help

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 4.4.0-RC.0
Material: 2.0.0-beta.10
Typescript: 2.5.2
Browser: Chrome (for now)

Multiple cards look before resizing the browser:

Multiple cards look after resizing the browser:

[leocaseiro]

Duplicated of https://github.com/angular/material2/issues/1072

Please read https://github.com/angular/material2/pull/6777

[leocaseiro]

Perhaps if you use FlexLayout instead of Grid List, it would work fine for your use case.

Eq: https://tburleson-layouts-demos.firebaseapp.com/#/responsive

[jelbourn]

Duplicate of #1072

[TitaneBoy]

@leocaseiro : Thank you for your references... In #6777 , I could find a comment that talk about an responsive angular article that just saved my life. That was what I needed.

Thanks again

[PurpleEdge2214]

It would be good if the Angular Material website made some mention of responsive layout!

[leocaseiro]

@PurpleEdge2214 try this https://stackoverflow.com/a/50616103/3415716

See https://stackblitz.com/edit/angular-responsive-material-grid-leocaseiro

[rdineshkumar88]

For Angular Material 6.2.1, here's the tutorial to create 12 columns responsive grid.

https://ampersandacademy.com/tutorials/angular-material/responsive-grid-layout-in-angular-material

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}