CODEWITHSUNDEEP
angularangular-material2
Guy Gallant
Guy Gallant

Reputation: 339

mat-grid-list does not render properly

I have just started using Angular Material with Angular v6. When I try to display the value of a public field in my component, it is not rendered on my web page. However, if I verify that the element exists using the Chrome DevTools, I can see that a value was generated, but the web page does not display it.

<mat-card>
  <mat-card-title>Basic grid list {{getLabel(22, 'Members')}}</mat-card-title>     <!-- This shows properly -->
  <mat-card-content class="demo-basic-list">
    <mat-grid-list cols="4" [rowHeight]="123">
      <mat-grid-tile> {{getLabel(22, 'Members')}} </mat-grid-tile>             <!-- This does NOT show properly -->
      <mat-grid-tile> Two </mat-grid-tile>
      <mat-grid-tile> Three </mat-grid-tile>
      <mat-grid-tile> Four </mat-grid-tile>
    </mat-grid-list>
  </mat-card-content>

`

Upvotes: 1

Views: 6815

Answers (3)

Chamikara Samarasekara
Chamikara Samarasekara

Reputation: 373

Add this to your css file

.grid-layout-custom{
  width: 50vw;
  height: 50vh;
}

And add class reference to html file

  <mat-grid-list cols="3" rowHeight="2:1" class="grid-layout-custom">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
  </mat-grid-list>

This happened because default height and width are 0; In that case the grid layout not rendering properly.

Upvotes: 3

vamcs
vamcs

Reputation: 345

I have also run into the same problems in which the grid just wouldn't show up or would be really small on the screen.

If you have a closer look at the documentation, the grid is actually made for images according to material design's specification: https://material.io/design/components/image-lists.html.

And if you inspect the elements of the grid, you'll see that it creates figure tags. I am not entirely sure if that's really the real usage of it and if the figure tags affect anything, but I suggest you use something else such as Angular flex layout and choose either flexbox or CSS grid instead.

Upvotes: 2

Kevin Koelzer
Kevin Koelzer

Reputation: 29

I just tested this out (replaced the methods with static value) and it worked fine for me.

Could you try the following?

  1. Remove the getLabel methods? Or show me it here?
  2. Remove the CSS and try it.
  3. Paste HTML and TS associated files for me to take a look at.
  4. Paste your AppModule to ensure imports are correct.
  5. Paste your styles.scss file to ensure @angular/material theme is correctly imported.

One of these should troubleshoot your way to success.

Upvotes: 0

Related Questions