36

I'm new to AngularJS so please bear with me. I'm using Angular Material Design and I have difficulties in identifying a way to efficiently do responsive grids.

Please see my comments in the code below:

    <div layout="row">
<div layout="row" flex="75" layout-sm="column" class="ptn-info-grid" layout-margin> <!-- USING ROW FOR DESKTOP AND COLUMN FOR MOBILE DEVICES -->

    <div layout="column" flex="66"> <!-- I want this div occupy 2/3 of screen in Desktop but change to 100 in mobile devices (but stays in 66) -->


        <div layout="row" layout-sm="column">
            <div class="ptn-info-grid-item" flex>1</div>
            <div class="ptn-info-grid-item" flex>2</div>
        </div>

        <div layout="row" layout-sm="column">
            <div class="ptn-info-grid-item" flex>3</div>
            <div class="ptn-info-grid-item" flex>4</div>
        </div>

    </div>

    <div layout="column" flex="32"> <!-- I want this div occupy 1/3 of screen in Desktop but change to 100(which actually happens) in mobile devices. Im not using 33 because while using margin for child elements this div goes out of the parent div a little. -->
        <div class="ptn-info-grid-item" flex style="margin-left: 0px;">Right Long
        </div>
    </div>

</div>
<div layout="row" flex="25" id="customer-phone-img"></div>

But changing the above flex values from "flex=66" and "flex=32" to simply flex and flex, gives me desired result in mobile devices, however as you would know, in desktop, instead of the 2:1 ratio its occupying half and half.

Please also see attached images.

Expected

a busy cat
(source: sprintu.com)

How it is

a busy cat
(source: sprintu.com)

So I'm looking for a way to change the flex value for smaller screens (for when layout-sm is applied - change flex=66 to flex=100).

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
user1220169
  • 805
  • 2
  • 9
  • 14
  • 1
    Unlike forum sites, we don't use "Thanks", or "Any help appreciated", or signatures on [so]. See "[Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?](http://meta.stackexchange.com/questions/2950/should-hi-thanks-taglines-and-salutations-be-removed-from-posts). – John Saunders May 09 '15 at 02:42
  • 1
    Thanks for sharing ! Will follow these. – user1220169 May 11 '15 at 14:58
  • 1
    `flex="32"` will have no effect. Material only allows multiples of 5 and 33 or 66 – hofnarwillie Aug 13 '15 at 13:23

1 Answers1

61

Check out the "Responsive Flex & Offset Attributes" section here: https://material.angularjs.org/#/layout/options

Basically, you can use these options:

  • flex - Sets flex on all.
  • flex-sm - Sets flex on devices less than 600px wide.
  • flex-gt-sm - Sets flex on devices greater than 600px wide.
  • flex-md - Sets flex on devices between 600px and 960px wide.
  • flex-gt-md - Sets flex on devices greater than 960px wide.
  • flex-lg - Sets flex on devices between 960px and 1200px.
  • flex-gt-lg - Sets flex on devices greater than 1200px wide.

So change your:

<div layout="column" flex="66">

to

<div layout="column" flex-gt-sm="66">

And that div will only use the 66 width when greater than small (mobile)

Kyle Ledbetter
  • 1,201
  • 10
  • 7
  • Excellent Kyle ! That did it. I was dumb to have missed that. Appreciate it :) – user1220169 May 11 '15 at 22:12
  • 1
    Cool, glad I could help. There's lots of little goodies in the docs that are easy to miss. They did such a great job building out the layouts that you can almost guess for features like that and assume they'll work – Kyle Ledbetter May 13 '15 at 17:09
  • Right I will sure check em out ;) – user1220169 Jun 10 '15 at 17:23
  • 5
    Those were [removed from the docs](https://github.com/angular/material/commit/f6e97a02a9c88b1695094a8a85a11958924e4c61#diff-f43b73a8f49340f536407d62cc0e1ad9L127) for some reason, but they still work. – ZachB Jan 19 '16 at 06:41
  • 1
    Do note that `flex-gt-lg` is now width >= 1920px, not width >= 1200px. See [here](https://github.com/angular/material/issues/6337). – amergin Apr 04 '16 at 21:32
  • Interestingly enough this doesn't work on things like `flex-gt-sm="nogrow"` ?!?! – Augie Gardner Jun 27 '16 at 23:19
  • @KyleLedbetter yeah, it's easy to miss - the documentation does not include the given directives at all. lol. – phil294 Jul 03 '16 at 03:05
  • For the life of me I couldn't decipher, `gt` and `lt` now it makes so much sense! – Aaron Jordan Oct 25 '18 at 05:59
  • Hey @KyleLedbetter, what is the mean of number `66` here? Is it the width in % or pixels ? – rahim.nagori Jan 30 '19 at 09:14