text-align in md-grid-tile (Angular Material) doesn't work

Question

text-align in Angular Material <md-grid-tile> doesn't work.

<md-grid-tile>{{video.created}}</md-grid-tile>
<md-grid-tile>{{video.code</md-grid-tile>

<md-grid-tile style="text-align: left;">
   {{ video.title }}
</md-grid-tile>

<md-grid-tile>{{video.playtime}}</md-grid-tile>

I want to align text like this:

but text-align in <md-grid-tile> didn't work :(

How can I do it?

I tried `` but it also didn't work, sorry – rabun May 24 '16 at 04:33 — rabun, May 24 '16 at 04:33

score 56 · Accepted Answer · answered Oct 21 '16 at 15:08

56

You could simply put a span or div tag around your text inside md-grid-tile:

<md-grid-tile>
    <div class="text-inside-grid">{{ video.title }}</div>
</md-grid-tile>

and then style it:

.text-inside-grid {
  position: absolute;
  left: 5px;
}

answered Oct 21 '16 at 15:08

hatef

5,491
30
43
46

1

It works perfect for too (angular 5 material: ) – AppLend Feb 26 '18 at 23:48
why it is position: absolute instead of position: relative ? – Wayne Wei Jul 11 '22 at 07:26
I couldn't remember how `md-grid-tile` works but I think that's because you'd want to position your text relative to its parent (md-grid-tile). – hatef Jul 12 '22 at 05:47

lwohlhart · Answer 2 · 2017-10-30T11:40:08.410

14

for those who have problems getting this example to work in angular2 you might need to add the ::ng-deep selector to the css for the figure

<md-grid-tile class="video-title">
    {{ video.title }}
</md-grid-tile>

css

 .video-title > ::ng-deep figure {
     justify-content: flex-start !important;
 }

*updated /deep/ to ::ng-deep because /deep/ was deprecated

edited Oct 30 '17 at 11:40

answered Jun 08 '17 at 09:13

lwohlhart

1,829
12
20

score 4 · Answer 3 · answered Oct 11 '18 at 22:30

4

Another alternative with flex-layout (and using the latest 'mat-' prefix):

<mat-grid-tile>
    <div fxFlex fxLayoutAlign="start center">{{ video.title }}</div>
</mat-grid-tile>

answered Oct 11 '18 at 22:30

Tim

1,605
6
31
47

score 1 · Answer 4 · answered May 24 '16 at 04:45

I did it!

<md-grid-tile>{{video.created}}</md-grid-tile>
<md-grid-tile>{{video.code</md-grid-tile>

<md-grid-tile style="text-align: left;" class="video-title">
    {{ video.title }}
</md-grid-tile>

<md-grid-tile>{{video.playtime}}</md-grid-tile>

css

.video-title > figure {
    justify-content: flex-start !important;
}

score 1 · Answer 5 · answered Aug 28 '20 at 13:42

Target div elements inside mat-grid-tile with a width of 100 percent.

my.component.scss

mat-grid-tile div {
  width: 100%;
  text-align: left;
}

my.component.html

<mat-grid-list cols="12">
  <mat-grid-tile colspan="4">
    <img [src]="hero.avatarUrl" i18n-alt alt="Hero avatar" />
  </mat-grid-tile>

  <mat-grid-tile colspan="8">
    <div>
      <h1>
        {{ hero.firstName }}
        {{ hero.lastName }}
      </h1>
    </div>
  </mat-grid-tile>
</mat-grid-list>

text-align in md-grid-tile (Angular Material) doesn't work

5 Answers5

Linked