9

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?

1

3 Answers 3

9

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

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"
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.