Angularjs material one row with 2 columns

Question

i am trying to achieve that, and can't figure how:

|-------------80%---------------------|----20%---|

one row with 2 columns with specific width.

• i don't understand something, columns (usage in Material) are look to me like rows > in rows

|-------------------------------------|----//---|
|-------------------------------------|----//---|
|-------------------------------------|----//---|

and not like my example.

How can i achieve it?

Answer 1

After you have imported AngularJS and Angular Material (including the css file), you need to import Angular Material in your AngularJS app. To do this, you need to add the "ngMaterial" provider in your AngularJS module, like this:

var app = angular.module("myApp", ["ngMaterial"]);

(if you skip this part, it won't work).

Then you can write your HTML code as follows

<div layout="row" layout-wrap>
    <div flex="80">80%</div>
    <div flex="20">20%</div>
</div>

This will create a div that will act as a container. It will contain the elements you want to show and they will be aligned in a row and, if necessary, they will be displayed in a second row. In the flex property you can specify the width (as a percentage) of the element compared to the width of the container.

Obviously you can change the name of your Angular module and the number/ width of your html elements as you want.

And there you can see some examples and a bit of documentation

Answer 2

First you need to declare:

md-cols Number of columns in the grid.

In your case (8+2=10):

<md-grid-list md-cols="10" ...

Then your items:

<md-grid-tile md-colspan="8">...</md-grid-tile>

<md-grid-tile md-colspan="2">...</md-grid-tile>

Codepen Sample - Angular Material Docs