CODEWITHSUNDEEP
angularangular-materialangular6
Empty_Soul
Empty_Soul

Reputation: 809

How to set width of mat-grid-tile

HTML

 <mat-grid-list cols="2" [cols]="breakpoint" rowHeight="486px" (window:resize)="onResize($event)">
   <mat-grid-tile >

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

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

How can i give width of 30% for 1st mat-grid-tile 70% for 2nd mat-grid-tile, and how can i set the height of mat-grid-tile equivalent for all the devices?

Upvotes: 3

Views: 29056

Answers (4)

hd84335
hd84335

Reputation: 9893

You can use !important value on the width property in order to impose the width that you want.

For example, add a class into your first mat-grid-tile that has the value 30%:

.firstCol {
    width: 30% !important;
}

Then add this class to your first mat-grid-tile tag, which will result in overriding any width instruction like (calc) imposed by material lib.

For me this is old way, but still gold !

Upvotes: 0

Josh Withee
Josh Withee

Reputation: 11336

If your mat-grid-list has width = 0px instead of filling the width of the page like it's supposed to, make sure that your mat-grid-list is not inside an element with display: flex;

Upvotes: 1

Cpt Kitkat
Cpt Kitkat

Reputation: 1402

You can add colspan. Make sure that the sum of col span is equal to cols Size.

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

Working Stackblitz

Upvotes: 8

Ganesh
Ganesh

Reputation: 6016

@Venetian Village.. you can devide the width of browser with the row class of CSS. Here height :100vh is taking complete the browser window height or if you want use parent's div use height: 100%. 

 <mat-grid-list class="row" cols="2" [cols]="breakpoint" (window:resize)="onResize($event)" style="height:100vh">
       <mat-grid-tile class="col col-lg-4 col-sm-4">

       </mat-grid-tile>
       <mat-grid-tile class="col col-lg-8 col-sm-8">

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

Upvotes: -1

Related Questions