Angular Material: How To Change Top Padding Of Mat-grid-tile


Answer :

The grid tile component sets top padding dynamically on the element itself, so you need to use the !important modifier in your CSS to override it.

HTML:

<mat-grid-tile class="my-grid-tile"></mat-grid-tile> 

CSS:

.my-grid-tile {     padding-top: 24px !important; } 

Setting rowHeight of mat-grid-list works for me, the G. Tranter doesn't work because the mat-grid-list has a padding It's set dynamically too and cannot be setted with !important.

 <!-- 70px to prevent hide floatLabel in matInput -->   <mat-grid-list cols="2" rowHeight="70px">     <mat-grid-tile>        <!-- your controls -->      </mat-grid-tile>   </mat-grid-list> 

Ref: https://material.angular.io/components/grid-list/examples

"@angular/material": "^6.4.3" "@angular/core": "^6.1.0" 

To get rid of the padding on top of mat grid tile restrict the height of the mat grid tile using this line of code:

<mat-grid-list cols='2' rowHeight='200px'> </mat-grid-list> 

Increment or reduce the pixels to fit all the rows of your mat tile content.


Comments

Popular posts from this blog

530 Valid Hostname Is Expected When Setting Up IIS 10 For Multiple Sites

C Perror Example

Converting A String To Int In Groovy