Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flex column safari issue #5441

Closed
cesar-garay opened this issue Oct 29, 2015 · 11 comments
Closed

Flex column safari issue #5441

cesar-garay opened this issue Oct 29, 2015 · 11 comments

Comments

@cesar-garay
Copy link

@cesar-garay cesar-garay commented Oct 29, 2015

Hello guys, before all thanks for the amazing work!.
I have an issue with safari browser on iphone devices. When an element have the layout="column" property and the child have flex parameter, the child element is displayed without "height" one over other.

Here is I have a codepen example, with the last version of angular-material and 1.3.9 angular version.
http://codepen.io/cesargaray/pen/EVRVje

Here I attached screenshot for an android device. ( v4.1.2 chrome 44.0)
image
And here the screenshot for the iphone ( ios 9.0.2 )
image

Maybe I'm using the layout and flex property in a wrong way, if is the case please let me know.

For your information, I found a workaround fix, that is to do not put the flex property for layout columns like this.

<div layout="column" layout-gt-sm="row">
         <div flex-gt-sm="50"> div 1 content</div>
         <div flex-gt-sm="50"> div 2 content</div>
</div>

Thanks in advanced

@ThomasBurleson

This comment has been minimized.

Copy link
Contributor

@ThomasBurleson ThomasBurleson commented Oct 30, 2015

Works on desktop Safari.

Yesterday we updated latest to point to the Angular Material v1.0.0-rc2 release.

screen shot 2015-10-30 at 4 05 25 pm

@BirdInTheCity

This comment has been minimized.

Copy link

@BirdInTheCity BirdInTheCity commented Nov 12, 2015

Experiencing this issue, too. It doesn't work on desktop Safari if you create a narrow browser window.

Chrome on left, Safari on right.
screen shot 2015-11-12 at 4 57 38 pm

@robertmesserle

This comment has been minimized.

Copy link
Contributor

@robertmesserle robertmesserle commented Nov 13, 2015

@ThomasBurleson This seems like a misuse of flexbox. In this case, what we want is NO flexbox and just display: block for these elements on a smaller screen. The problem is that the container has no height on its own, which doesn't make sense when used with flexbox.

@robertmesserle

This comment has been minimized.

Copy link
Contributor

@robertmesserle robertmesserle commented Nov 13, 2015

@cesar-garay The correct code for this should be: http://codepen.io/anon/pen/OyrBvg?editors=100

Note that I removed the flex=100 because what you really want is just simple display: block in smaller screens.

@cesar-garay

This comment has been minimized.

Copy link
Author

@cesar-garay cesar-garay commented Nov 13, 2015

@robertmesserle Thanks for the reply.
The fix that you propose is the same that I proposed like a workarround in my comment. I'm glad to know that i'm in the correct way.
Thanks again!

@tucq88

This comment has been minimized.

Copy link

@tucq88 tucq88 commented Apr 8, 2016

I dont think adding display:block to .layout-column is a proper fix :(

@alexilyaev

This comment has been minimized.

Copy link

@alexilyaev alexilyaev commented Apr 26, 2016

Had a similar issue, been using flex="50" flex-xs="100", fixed it by using only flex-gt-xs="50", that way on the smaller screens it will fall back to normal flow.

@jascination

This comment has been minimized.

Copy link

@jascination jascination commented May 31, 2016

I'm gonna post this on a bunch of similar issues raised here, as I've searched far and wide for a solution to this - it's still an issue in Safari on IOS, you can see it in "responsive mode" if you're on desktop safari.

The solution is to add flex: 1 0 auto !important; to the parent layout elements that are not correctly being filled to their children's heights. The !important may not be necessary, up to you.

@andreyavram

This comment has been minimized.

Copy link

@andreyavram andreyavram commented Jun 13, 2016

Thanks for the solution, @jascination!
We struggled 3 hours until we found this.

@kirby81

This comment has been minimized.

Copy link

@kirby81 kirby81 commented Jun 13, 2016

Thanks a lot @jascination !
You just save my day.

@stinaq

This comment has been minimized.

Copy link

@stinaq stinaq commented Feb 23, 2017

Yes, thank you @jascination !! This is a very odd thing, and I still don't understand why it's set to works as expected? I only get it in Safari on ios. But if a container with layout="column" has only children that are also flexed, the parent collapses. Is the bug a bug i n Safari implementation?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.