Angular Material 2 : How to style an md-grid-tile?

Question

 <md-grid-list cols="3" >
  <md-grid-tile style="overflow : scroll;align-items: initial;">

    <app-general style="padding-left : 1em;" ></app-general>

  </md-grid-tile>
  <md-grid-tile class="dummy" style="overflow : scroll;align-items: initial;">
    <app-slab2g style="padding-left : 1em;" > </app-slab2g>

  </md-grid-tile>

  <md-grid-tile style="overflow : scroll;align-items: initial;">
    <app-slab3g style="padding-left : 1em;" > </app-slab3g>


  </md-grid-tile>
</md-grid-list>

How to align items inside the md-grid-tile differently other than its default center alignment?

Solution 1

You can use ::ng-deep to override the default css of md-grid-tile.

css:

::ng-deep md-grid-tile.mat-grid-tile .mat-figure {
    align-items: initial;  /*vertical alignment*/
    justify-content: initial;  /*horizontal alignment*/
}

Plunker demo

Solution 2

To avoid messing with your whole project, use in the component:

HTML:

<mat-grid-tile [colspan]="8" class="script-menu"> </mat-grid-tile>

CSS:

.script-menu >::ng-deep .mat-figure{
    justify-content: flex-start;
}

Solution 3

html

<mat-grid-tile class="title-tem">
  <div class="item-content">
    hi
  </div>
</mat-grid-tile>

css

 .title-tem >::ng-deep .mat-figure{
  align-items: flex-start;
  justify-content: flex-start;
}

that will be work :)

Solution 4

After much blood and tears, I was able to style the first column of an angular material grid without affecting other grids on the page. The below style will left align and center vertically the Persons Name only in this <mat-grid-list>.

Angular material grid:

<mat-grid-list cols="4" rowHeight="4:1">
    <mat-grid-tile colspan="2">
        <div class="leftVerticalAlign">
        Persons Name
        </div>
    </mat-grid-tile>
    <mat-grid-tile>Persons Phone</mat-grid-tile>
    <mat-grid-tile [style.border-left]="'12px solid gray'">Persons Email</mat-grid-tile>
</mat-grid-list>

The elusive CSS:

.leftVerticalAlign {
    left: 1em;    
    position: absolute;  
    top: 50%;
    transform: translate(0px, -50%);
    margin: 0;
}

I threw an extra border-left style in there as another way to apply styles, but it's limited to what it can style I've noticed.

For more info about aligning horizontally and vertically check out w3schools

They saved my life on this one.

Solution 5

this is the only reliable solution I found so far. !important didn't work. ::ng-deep messes up main code. If you use div and use absolute in css you can align the div the way you want.

html

<mat-grid-tile *ngFor="let project of projects" 
        [style.background]="project.Color" (click)="openDialog(project)" >
        <div fxLayoutWrap fxLayoutAlign="start center" class="footer">

        </div>
</mat-grid-tile>

css

.footer {
    position: absolute;
    left: 5px;
    bottom: 5px;
  }

View more solutions

Comments

[Vato]

yea but this messes up other places you use grid-tiles.

[Aakash Uniyal]

Yes , i noticed it later too . But i found another fix as well . Might , Post it after sometime

[Setup]

Set the styles globlally in the styles.css / styles.sccs file like so: mat-grid-tile.yourClass{ overflow:auto } since ::ng-deepis deprecated: angular.io/guide/component-styles#deprecated-deep--and-ng-de‌​ep

[Aakash Uniyal]

try using :host , to keep the scope as the component itself and not leak the styles defined by ng-deep outside the component

[João Ignacio]

Good advice! @AakashUniyal

[otembajelle]

The one and only solution I could find that still works with Angular version 14.