CODEWITHSUNDEEP
angularangular-material
Nick
Nick

Reputation: 236

Angular Material Align Left Inside Grid List

I have the following Grid List:

<mat-grid-list cols="3" rowHeight="2:1">
  <mat-grid-tile colspan="2">1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
</mat-grid-list>

The first tile has more stuff in it so I have it taking up two columns but the data is always centered in the middle of the tile. How can I get the content inside the tile to be aligned/justified to the left of the tile? I tried adding align-content and align-text as a class to the tile but the content never moves.

Upvotes: 0

Views: 6037

Answers (2)

DWF
DWF

Reputation: 360

Similar to Shankarlal's answer above, but I don't think you need to throw !important in there, as that's an override that gets hard to find if the solution gets more complicated.

This might not fit everyone's needs, but instead of wrestling with the functionality and css properties in order to fit alignment, your component can set the width/height of inner components to 100%. This way, Angular will still get its way (center it all!), and you can adjust the alignment as you see fit (left, right).

Example here with simple checkboxes (my real world scenario), but you can obviously expand on this with whatever your situation is (most complex example is the last one).

https://stackblitz.com/edit/angular-74i5kw

Upvotes: 0

Shankarlal D
Shankarlal D

Reputation: 183

set width: 100% !important; inside the div of mat-grid-tile

<mat-grid-list cols="3" rowHeight="2:1">
  <mat-grid-tile colspan="2">
    <div class="w-100">


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

  <mat-grid-tile>
    <div class="w-100">


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

Upvotes: 2

Related Questions