-
Notifications
You must be signed in to change notification settings - Fork 771
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
IPad Rendering Issues -- flex ordering and nested fxFlexFill #244
Comments
Safari doesn't support Flex :) |
This problem will also appear on Safari on Mac. Happy coding! :) |
I'm really sorry, but I'm really stuck... somehow I am missing something fundamental. @mackelito I'm not sure what to take away from the fork to my Plunker you prepared. Beyond the "display: block;" on the body? I get the concept that the parent needs to have height defined to calculate/display correctly in safari... I however don't observe any difference when attempting to implement others' solutions via issues 103, 162, 201. I have an updated Plunker where I've attempted each of the following with no change in display:
https://plnkr.co/VxJ7CHEDRK04j65uaytn Thanks for your patience with me... any additional guidance is very much appreciated. |
I had what I believe is a similar issue. Any plans to fix this? |
Having this problem on Safari on MAC. This is not only a IPhone/Ipad issue. Is it possible to raise the priority? Thanks :) |
The Plunkrs no longer work. Can anyone confirm if this is still an issue with the latest beta? |
I'm going to close this issue. We can reopen if someone else runs into this and can produce a new demo. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
I have an application that is experiencing a couple issues (hopefully just user error???) as demonstrated at: https://plnkr.co/fcsPtbnXVVxTmTuVcpoa
With the desktop versions of Chrome or Edge, the application shows as:
However on an iPad with either Safari or Chrome it shows as:
First issue is the ordering of the flex div... on the desktop it shows (as desired) in the order in the HTML, on the iPad the plain fxFlex (yellow) shifts to the bottom.
<div fxFlexFill fxLayout="column" fxLayoutAlign="start stretch">
<div fxFlex="100px"...>
<div fxFlex="100px"...>
<div fxFlex></div>
<div fxFlex="100px"...>
</div>
Second issue is the nesting of a fxFlexFill div... on the desktop it shows as all blue (as desired), on the iPad it sizes to the content (small blue div in large black area).
<div fxFlex style="background-color:black; color: white;">
<div fxFlexFill style="background-color:blue; ...>
</div>
The text was updated successfully, but these errors were encountered: