CODEWITHSUNDEEP
htmlcssangularangular-material2
Aakash Uniyal
Aakash Uniyal

Reputation: 1559

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

 <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?

Upvotes: 13

Views: 21939

Answers (6)

Balloon Wen
Balloon Wen

Reputation: 121

::ng-deep is deprecated, don't use it.
based on Customizing Angular Material component styles, by default, you cannot override the styles affect elements that are children of other components within your template.
One practice is: 

.your-component .mat-grid-tile .mat-figure {
  justify-content: flex-start;
}

Upvotes: 0

Jo&#227;o Ignacio
Jo&#227;o Ignacio

Reputation: 704

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

Upvotes: 6

goku_da_master
goku_da_master

Reputation: 4307

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.

Upvotes: 6

qiwei huang
qiwei huang

Reputation: 41

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 :)

Upvotes: 4

GreedyAi
GreedyAi

Reputation: 2839

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

Upvotes: 3

Nehal
Nehal

Reputation: 13297

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

Upvotes: 10

Related Questions