Angular Material Design Layout custom sizes

Question

How to add custom flex attributes for different sizes of the screen? Referring to the spec here : https://material.angularjs.org/latest/#/layout/options

For example, the flex attribute flex-gt-lg Sets flex on devices greater than 1200px wide. I want to add one more attribute say something like flex-gt-lgx which sets flex on devices greater than 1600px wide, for which angular material does not provide support. How will do something like this?

Answer 1

Based on @codeMan answer with media query ...

@media only screen and (min-width: 1601px) {
    [flex-gt-lgx="25"] {
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    }
}

Custom Angular directive

You could write a custom directive for flex-gt-lgx that would generate the CSS to be apply in the style attribute with the desired flex value passed from the directive parameter.

That way you wouldn't be limited to the hardcoded CSS values.

Mimic the Angular Material CSS

You could make the same thing as Angular Material and create all the CSS for possible flex values as stated in their documentation and than use the flex-gt-lgx attribute on the desired HTML tag just like any other flex directive.

Currently, the flex directive value is restricted to multiples of five, 33 or 66.

For example: flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ... flex="100".

https://material.angularjs.org/latest/layout/children

Answer 2

codeMan,

You will have to change the CSS in a way or another.

Complex way

Go to their css resources an alter it to fit your needs

Easier way

Create your own CSS changes overwriting theirs with !important

@media screen and (min-width:1200px) {     
.yourclass { 
      width:100% !important; 
      background:#ccc !important; 
      float:none !important;     }  
}

Cheers!

Answer 3

I wrote a media query as follows :

@media only screen and (min-width: 1601px) {
    [flex-gt-lgx="25"] {
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    }
}

and used the following span tag

<span flex-md="10" flex-sm="5" flex-lg="15" flex-gt-lg="20" flex-gt-lgx="25" ></span>

and it worked as expected!!

Note: Downside of doing this is that flex-gt-lgx should be always set to 25 value.