Material: Fill-layout is having no height on Safari & Android webview

Created on 2 Nov 2015  Â·  10Comments  Â·  Source: angular/material

On Android default browser and Safari as it's also Webkit, layout-fill is using a height:100% which is resulting in a layout not having any height. When using height:auto it seems to work fine.
http://codepen.io/anon/pen/NGBxeE
In this example, the dialog 's line are overlapping each others because of one of them having layout-fill

required Android Safari can't reproduce flexbox layout

Most helpful comment

Any ETA or workaround for this? Its causing me alot of problems.

All 10 comments

Angular Material 1.0.0 has been released. What does it mean for this issue and for 1.0-rc8 milestone?
I'd say it's quite critical because the framework is basically unusable on iOS now.

Any ETA or workaround for this? Its causing me alot of problems.

Waiting the issue solved override the class. And its good

  .layout-fill {
    margin: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    height: auto;
    }`

Still not working. I tried to set min-height: auto, min-height: 100%, but won't work. Here the markup https://codeshare.io/1Z3UZ

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

I think I found solution for it. At least in all my cases it was working.

Aloha im on vacation now, when ill be back ill give a sign. I made pull
request

On May 21, 2017 2:04 AM, "Edward Knowles" notifications@github.com wrote:

@kkulikowski https://github.com/kkulikowski care to share?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/material/issues/5492#issuecomment-302904148,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGmyeqf4lCz-b9ANczr4p6blAdVkHcRLks5r73GFgaJpZM4GaJu4
.

It's okay, I found it attached to the issue, couldn't get your fix to work - will try tomorrow!

Both Safari 9 and 10, on OS X

I had a similar issue and fixed it adding flex to the element using layout-fill

No longer reproducible in Safari Version 13.1 (15609.1.20.111.8).

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bobber205 picture bobber205  Â·  3Comments

diogodomanski picture diogodomanski  Â·  3Comments

WebTechnolog picture WebTechnolog  Â·  3Comments

PeerInfinity picture PeerInfinity  Â·  3Comments

nikhildev picture nikhildev  Â·  3Comments