Angular Material Design Layout Custom Sizes

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 attri

Solution 1:

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!

Solution 2:

I wrote a media query as follows :

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

and used the following span tag

<spanflex-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.

Solution 3:

Based on @codeMan answer with media query ...

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

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