Search code examples
cssangularjsresponsive-designangularjs-material

Angular material responsive ui

I have to develop a responsive ui in angular material css. I which i have arrange the div as its come 4 div in one row in lg screen and 2 in md and 1 on sm screen. for that i have wrote the fallowing code but is not working as expected.

<div layout="row">
                            <div flex="100" flex-gt-sm="50" flex-gt-md="25">Name :</div>
                            <div flex="100" flex-gt-sm="50" flex-gt-md="25">Rhushikesh G. lokahnde</div>
                            <div flex="100" flex-gt-sm="50" flex-gt-md="25">Date of Birth :</div>
                            <div flex="100" flex-gt-sm="50" flex-gt-md="25">25th August 1990</div>
                        </div>
Solution

  • You need to add layout-wrap else it wont wrap and the content will be on 1 row.

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