<...">
Clever Geek Handbook

Angular Material 2: How to style the md-grid tiles?

 <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 do I align items within an md-grid tile in a different way other than the default centralized alignment?

+8


source to share


6 answers


You can use ::ng-deep

to override the default css for 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

+9


source


This is the only reliable solution I've found so far.! important doesn't work. :: ng-deep will mess up the main code. If you are using a div and using absolute in the 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;
  }
+2


source


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

this will work :)

+2


source


After a lot of blood and tears, I was able to style the first column of the angular material grid without affecting the other grids on the page. The style below will left align and center vertically the character name just in this one <mat-grid-list>

.

Corner material mesh:

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

Elusive CSS:

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

I added some extra border-left

styling there border-left

as another way of applying styles, but it was limited to the fact that it can style, which I noticed.

For more information on horizontal and vertical alignment visit w3schools

They saved my life on this one.

+2


source


In order not to interfere with the 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;
}
+2


source


:: ng-deep is deprecated , don't use it.
based on custom styling of default angular material components, you cannot override styles affecting elements that are children of other components in your template.
One practice:

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


source






More articles:


All Articles