CODEWITHSUNDEEP
angularangular-material2
Owain van Brakel
Owain van Brakel

Reputation: 3349

Flexbox layout on Safari not working in mobile view

I'm using @angular/flex-layout and @angular/material for my website but I'm having issues Smith my mobile layout when using safari.

This only happens when the window is small enough for the md or xs rules

On Chrome it looks like this: Chrome

But on safari it looks like this: Safari

Here is a plunk with the code where it happens: https://embed.plnkr.co/2gh075v8CZ5aU6iA0xYd/

Upvotes: 1

Views: 1264

Answers (2)

Karthikkumar
Karthikkumar

Reputation: 658

if you are using @angular/flex-layout try to utilize the existing fxFlex Options rather than using CSS to overwrite the styles.

same CSS flex: 1 0 auto !important can also be done by fxFlex="noshrink"

Github fxFlex-API

Upvotes: -1

Owain van Brakel
Owain van Brakel

Reputation: 3349

I have found out what the issue was.

i had to add flex: 1 0 auto !important; to the parent that was not being filled correctly.

Upvotes: 2

Related Questions