Material: layout-row with layout-wrap and percent flex widths, in Safari

[lucasmaj]

1720 appears to be back: in Safari, layout-row with layout-wrap and percent flex widths

{flex: 1 1 0;} for layout-row children solved my problem

[dvdvck]

Hi @lucasmaj, could you share that css snippet workaround?
thanks

[lucasmaj]

In my particular case the children of .layout-row were all flex-50 so this solution worked for me:
.layout-row.layout-wrap > .flex-50 { flex: 1 1 0; }

I am suspecting this would work in a more general case
.layout-row.layout-wrap > * { flex: 1 1 0; }

Apparently Safari prefers flex: 1 1 0; over flex: 1 1 100%; when parent does flex-wrap: wrap;

[stephengardner]

Oh my gosh this issue came back. This has blown my last two days. Working on a PC and trying to debug Safari issues is the actual devil.

Consider this case:

  <div id="menu" layout="row" layout-wrap layout-align="space-between center">
    <div class="menu-item" flex="100" flex-gt-xs=50">
      <md-button>
        X
      </md-button>
    </div>
    <div class="menu-item" flex="100" flex-gt-xs="50">
      <md-button>
        Y
      </md-button>
    </div>
     ...
  </div>

We want the menu items to be full-screen, but for >gt-xs we want them to be half screen.
flex: 1 1 0; does not work in this case.

[flobiwankenobi]

That doesn't really work @lucasmaj. If I apply your snippet, the wrap just getting ignored and it behave like a normal layout-row.

[lji687]

+1

We are currently using .layout-row.layout-wrap > * { flex: 1 1 0; }, b/c it makes things a little better in safari. However, this causes problems with layout-wrap in Safari and Chrome.

[stephengardner]

So I'm assuming based on the OP that this was fixed before? Can anyone decipher what happened to re-instigate this problem? This is huge for us.

[brianfeister]

So, what's the release cycle like these days? I know many of the team have moved onto https://material.angular.io/ ... any chance of getting a fix for this in a 1.1.5 release @ThomasBurleson ?

Also, should this have the label P1 - Broken Renders / Major Use Cases added?

.layout-row.layout-wrap > * { flex: 1 1 0; } doesn't work for my use case at all, it prevents the elements from wrapping so with that "fix" I have 20 elements. They used to just mimic typical box-model float: left, but with that fix applied they just create a horizontal scrollbar and overflow.

[brianfeister]

@ThomasBurleson I've pulled current master and am tinkering with a fix locally right now. It can be fixed by reverting all of the flex: 1 1 100%; change from https://github.com/angular/material/commit/c6fb5a5473806c158d6a8675d4948ba3f6b87740#diff-cd89844cbb4bd719d867bb0d67064ba1L133 back to flex: 1 1 #{$value};

https://github.com/angular/material/commit/c6fb5a5473806c158d6a8675d4948ba3f6b87740

I would argue the current bug is more severe than https://github.com/angular/material/issues/5345 ever was and we should consider reverting #9572

Here is a Codepen of the working fix in safari from RawGit pointing to my (git add -f ./dist/angular-material.css) fork for demo purpose only:

http://codepen.io/brianfeister/pen/ybYyGr

/cc Also tagging https://github.com/angular/material/issues/10345, #10388, @herophuong, @EladBezalel, @clshortfuse, @crisbeto

[stinaq]

I also have a workaround that I'm not proud of, and it's quite large, but it works for me for the moment.

[class*="flex-"] {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

  > .flex-gt-xs-33 {
    @media (min-width: 600px) {
      flex-basis: 33%;
      max-width: 33%;
    }
  }

And the last part I have the duplicated to all the cases where I've needed them.

As I said, not a great solution, but it works

[stephengardner]

1.1.4 was recently released.

Can anyone confirm this is fixed?

[guiporto]

@stephengardner it wasn't fixed 😢

[brianfeister]

Probably silly to do so, but can confirm it wasn't fixed in 1.1.4. I have a mission-critical application that depends on this project, so I was forced to do something hack-ish to move forward. I took the various source .scss files and stripped them so they only generate the layout bit as it pertains to the incorrect flex attribute. It's still a huge 42K minified, but it was the only way for my app.

If someone else wants the override / shim, it can be found here:

https://github.com/brianfeister/material/blob/5ea6d5a62e9038dcec8f258023b0e579839a5899/dist/angular-material.css

[nello]

This is a little ugly, but worked for us:

.layout-row.layout-wrap > * {
  flex: 1 1 0;

 @media only screen and (max-width: $max-width-xs) {
     flex: 1 1 100%;
  }
}

[wsfuller]

Does anyone have a solution for this issue yet or is something being worked on? I've tried .layout-row.layout-wrap > * { flex: 1 1 0; } but that has some adverse effects in Safari and isn't a catch all that is applicable. The behavior experienced is the grid not behaving the same in Chrome or FF or wrapping not happening at all.

For my situation I need to have:

flex="90" flex-sm="33" flex-md="25" flex-lg="20".

macOS: 10.12.5
Safari: 10.1.1

[brianfeister]

@wsfuller the smaller shims above didn't work for me because of how heavily my team uses the angular-material layout stuff. For other people above, they did the following as-needed for their project depending on their usage. Since I use everything in all the permutations with xs-sm gt-lg, and so on, I had to override the whole thing which I linked above:

https://github.com/brianfeister/material/blob/5ea6d5a62e9038dcec8f258023b0e579839a5899/dist/angular-material.css

.flex-0 {
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%; 
}

[wsfuller]

@brianfeister Thanks for sending that over, was extremely helpful. Was going back and forth on using the Grid List still kicking around the FE layout as it's getting built. But put in that override file and everything seems to be working as expected.

[peio72]

@brianfeister please could you explain how i can override with your working css using my bower.json to install all my packages ? Thanx.

[brianfeister]

This isn't related to Bower, just treat it like your custom application css

[ThomasBurleson]

We will not fix this in AngularJS Material. You are welcome to provide a Pull Request to resolve this for Material 1.1.x.

Ongoing support for Flexbox layouts is provided in Angular 4.x with @angular/flex-layout.

[alexanderschulze]

Another ugly way (motivated by @stinaq) to get around the Safari issue is setting the minimum width to the flex-box size [Sass syntax].

.layout-row.layout-wrap {
  & > .flex-0 { min-width: 0%; }
  & > .flex-5 { min-width: 5%; }
  & > .flex-10 { min-width: 10%; }
  & > .flex-15 { min-width: 15%; }
  & > .flex-20 { min-width: 20%; }
  & > .flex-25 { min-width: 25%; }
  & > .flex-30 { min-width: 30%; }
  & > .flex-33 { min-width: 33.33%; }
  & > .flex-35 { min-width: 35%; }
  & > .flex-40 { min-width: 40%; }
  & > .flex-45 { min-width: 45%; }
  & > .flex-50 { min-width: 50%; }
  & > .flex-55 { min-width: 55%; }
  & > .flex-60 { min-width: 60%; }
  & > .flex-65 { min-width: 65%; }
  & > .flex-66 { min-width: 66.66%; }
  & > .flex-70 { min-width: 70%; }
  & > .flex-75 { min-width: 75%; }
  & > .flex-80 { min-width: 80%; }
  & > .flex-85 { min-width: 85%; }
  & > .flex-90 { min-width: 90%; }
  & > .flex-95 { min-width: 95%; }
  & > .flex-100 { min-width: 100%; }
  [class*="flex-"] { flex: 1 1 auto; }
}

[rajathms]

@brianfeister thank you so much for that file works like a champ
I confirm that the solution proposed by @brianfeister works!