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?
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
position: fixed; it will remain always at the top, also when you scroll a long page. It will also do all the job for you :) Here the demos and the documentation<div layout="row" > <div flex="70" **layout-align="end left"**><div flex="30" **layout-align="center end"**> how can i set each of the column to be in specific direction?layout-align. The possible values are shown in the docslayout-align [roperty suppose to be on a div ?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>
md-colspan is a property of grid tile and if i don't use grid-list i should use flex?