CODEWITHSUNDEEP
angularangular-material2
Daniel
Daniel

Reputation: 1755

How to set different width for md-grid-tile

I use new Angular Material. This code produce grid with two columns:

<md-grid-list cols="2" rowHeight="10">
  <md-grid-tile></md-grid-tile>
  <md-grid-tile></md-grid-tile>
</md-grid-list>

How to set 20% width to first columns and remaning 80% to second?

Upvotes: 12

Views: 19359

Answers (2)

Raed Khalaf
Raed Khalaf

Reputation: 2065

Try this:

<md-grid-list cols="10" rowHeight="2:1">
  <md-grid-tile colspan='2'>1</md-grid-tile>
  <md-grid-tile colspan='8'>2</md-grid-tile>
</md-grid-list>

you need to read this documentation: https://material.angular.io/components/grid-list/overview

enter image description here

Upvotes: 22

Kondal
Kondal

Reputation: 2980

material.angularjs.org. mdGridTile

Tiles contain the content of an md-grid-list. They span one or more grid cells vertically or horizontally, and use md-grid-tile-{footer,header} to display secondary content.

 <md-grid-list cols="10" rowHeight="2:1">

   <md-grid-tile colspan='2'>1 </md-grid-tile>

   <md-grid-tile colspan='8'>2 </md-grid-tile>

 </md-grid-list>

md-row-height 

string

One of

CSS length - Fixed height rows (eg. 8px or 1rem) {width}:{height} - Ratio of width to height (eg. md-row-height="16:9") "fit" - Height will be determined by subdividing the available height by the number of rows

Upvotes: 0

Related Questions