CODEWITHSUNDEEP
htmlcssangular5angular-material2
Sony Khan
Sony Khan

Reputation: 1504

Angular Material: How to change top padding of mat-grid-tile

am using angular-material with angular 5. mat-grid-tile has it's own top padding that calculates using calc method.

I want to set custom padding on mat-grid-tile. How can i do this?

Upvotes: 9

Views: 24410

Answers (3)

pmkent
pmkent

Reputation: 1006

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.

Upvotes: 2

Zaha
Zaha

Reputation: 946

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"

Upvotes: 5

G. Tranter
G. Tranter

Reputation: 17908

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;
}

Upvotes: 9

Related Questions