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

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable