CODEWITHSUNDEEP
angularmaterial-designangular-material2
Winten
Winten

Reputation: 664

Angular2 Material Grid Full height

I have started learning angular 2 material and it is very confusing because I cannot find many things in the documentation and official material.io css is written in terms of classes, whereas angular material uses "directive-like" objects.

I would like to simply make my grid full screen height (height 100%), but I can't find such simple example.

This is the most basic grid taken from angular2 material website, however, the row here is with fixed 1:1 ratio and not 100% height:

https://stackblitz.com/edit/angular-fp1akt-hotvqw?file=app/grid-list-overview-example.html

If I am not mistaken grid is the basic building block for layout in which other html elements will be added.

Upvotes: 5

Views: 13909

Answers (3)

rizentium
rizentium

Reputation: 1132

On the latest angular material, you can do as bellow:

<mat-grid-list cols="3" rowHeight="100%">
    <mat-grid-tile colspan="2" rowspan="1" style="background: grey;" ></mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1" style="background: blue;" ></mat-grid-tile>
</mat-grid-list>

Upvotes: 1

jasie
jasie

Reputation: 2444

I think you can achieve this with rowHeight: 'fit'.

Fit: Setting rowHeight to fit This mode automatically divides the available height by the number of rows. Please note the height of the grid-list or its container must be set.

See https://material.angular.io/components/grid-list/overview#setting-the-row-height

Upvotes: 1

Wandrille
Wandrille

Reputation: 6821

I suggest you to use FlexLayout from Angular. This is an independant library that allows you to manage all your position problem with efficiency.

This is more powerfull than the grid of material.

With Angular Material, this is top!

Upvotes: 6

Related Questions