CODEWITHSUNDEEP
angularjsmaterial-design
E.Meir
E.Meir

Reputation: 2226

Angularjs material one row with 2 columns

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

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

one row with 2 columns with specific width.

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

and not like my example.

How can i achieve it?

Upvotes: 4

Views: 13319

Answers (2)

Lorenzo Montanari
Lorenzo Montanari

Reputation: 968

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

Upvotes: 6

Stubbies
Stubbies

Reputation: 3124

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

Upvotes: 1

Related Questions