Layout with fxFlex="auto" not restoring max-height values properly

[TylerDev6]

on page load scans breakpoint overlaps too aggressively [and matches the smallest instead of the largest matching].

<div fxFlex="auto" fxFlex.gt-xs="33%" fxFlex.gt-sm="50%"></div>

I'm using fxFlex with 3 breakpoints and IE seems to only pick the first one it passes:

on page load, in spite of gt-sm qualifying, it defaults to the gt-xs value. However if I manually re-size the browser it will correct itself. This happens in IE11 only.

[ThomasBurleson]

Need a plunked plz

[TylerDev6]

Do you have an existing plunkr I can start from?

[ThomasBurleson]

@TylerDev6 - please update with Beta.4 (from npm) and see if the problem persists.

[ThomasBurleson]

@TylerDev6 - Try this Starter Plunkr: https://plnkr.co/edit/h8hzyoEyqdCXmTBA7DfK?p=preview

[TylerDev6]

https://plnkr.co/edit/o6zKj8?p=preview

Thanks for the help. Here's a plunk showing the problem.... I noticed a few things:

1. It is also reproducible in Chrome / Firefox.
2. It didn't start happening until I added fxLayoutGap properties.

Essentially, on initial page load the widths are being set to 33-33-33, instead of 50-23.4-23.4. Manually resizing the window will correct it.

[TylerDev6]

I am also noticing now that going from a % based fxFlex to fxFlex="auto" does not remove the % restriction.

[ThomasBurleson]

If you are using the code from HEAD, you should see this:

https://github.com/angular/flex-layout/blob/master/src/lib/flexbox/api/flex.ts#L264

which means the applied inline style should be flex: 1 1 auto. If not, please file a separate issue.

[TylerDev6]

so I should check out @latest? I'm running beta.4 at the moment

[TylerDev6]

and what's going is as follows:

fxFlex.gt-sm=33% will apply a max-width: 33% in addition to the flex 1 1 100% style.....
fxFlex="auto" will switch to flex 1 1 auto, but the max-width: 33% remains.

[ThomasBurleson]

@TylerDev6 - please file distinct issues separately.

[ThomasBurleson]

This is working well with the latest code in master: Plunkr Demo

-XS-

-SM-

-MD-

[TylerDev6]

I can still break your plunk.... expand to largest viewport, then refresh.... it's only on initial load of the page that it breaks.

[TylerDev6]

and the "active media query" field in your plunk lists the wrong one. So I guess that's where the problem lies.

[ThomasBurleson]

Reopening as valid issue. Thx @TylerDev6

[TylerDev6]

Cool. Thanks @ThomasBurleson for your work on this library. It's fantastic.

[ThomasBurleson]

Fixed with #183

[TylerDev6]

I moved to 2.0.0-rc.1 and can still reproduce this problem....

[ThomasBurleson]

@TylerDev6 - When one or more mediaQueries activate (which may happen when the current viewport size is in the range of 1 or more mediaQuery ranges), the ObservableMedia will report each... and perhaps the UI only shows the last one to arrive.

Based on current code in HEAD, what specifically is the issue you are reporting ?

[TylerDev6]

So when testing with the Plunk, I see that the ObservableMedia is accurately reporting the correct media query now, however the UI is still displaying the first matching result.

[ThomasBurleson]

@TylerDev6 - Thank you.. we will investigate.

[TylerDev6]

basically, <fxFlex="auto" fxFlex.gt-sm="33%" fxFlex.gt-md="50%" is choosing 33% even though gt-md qualifies.... only on initial page load.

[ThomasBurleson]

@TylerDev6 - please file a separate issue for this ^.

[ThomasBurleson]

Closing as fixed.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}