CODEWITHSUNDEEP
angularangular-material
Chinthani
Chinthani

Reputation: 45

md-grid-list rowHeigh="fit" not working. Is there an alternative solution

I'm creating an angular2 application with materialize design. I'm trying to create a layout where I want the layout to be divided into two parts. I used md-grid-list for that. Referred documentation https://material.angular.io/components/grid-list/overview for that. md-grid-list rowHeigh="fit" not working. Is there an alternative solution to make the row height similar to height of the screen.

Here's the project.component.html file that I was working on.

<md-toolbar><h2>Projects</h2></md-toolbar>
<md-grid-list cols="50" rowHeight="fit" >
  <md-grid-tile [colspan]="15"> 1 </md-grid-tile>
  <md-grid-tile [colspan]="35" >2</md-grid-tile>
</md-grid-list>

When I provide style="height:300px" It looks like this. enter image description here

But I want to divide the whole screen into two.So that I used cols="2".I can change the height to enable it to suit the whole screen. But I cannot give a fixed height to the content as it can be changed according to the data that'll be available inside the content.

Upvotes: 3

Views: 12381

Answers (1)

Ghulam Mohayudin
Ghulam Mohayudin

Reputation: 1103

you can set any elements height to 100% with style="height: calc(100vh - 24px)" you have 2 columns but telling cols=50 in md-grid-list also apply height to your md-grid-list for rowHeight="fit" to work

see documentation says

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.

<md-grid-list cols="2">
  <md-grid-tile style="height: calc(100vh - 24px)">1</md-grid-tile>
  <md-grid-tile style="height: calc(100vh - 24px)">2</md-grid-tile>
</md-grid-list>

Upvotes: 6

Related Questions