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

1px hole between lg and xl #149

Closed
chpasha opened this issue Jan 31, 2017 · 1 comment · Fixed by #159
Closed

1px hole between lg and xl #149

chpasha opened this issue Jan 31, 2017 · 1 comment · Fixed by #159
Labels
bug has pr A PR has been created to address this issue P2 Issue that is important to resolve as soon as possible
Milestone

Comments

@chpasha
Copy link

chpasha commented Jan 31, 2017

All media-query aliases begin there where previous alias ends, e.g. md ends on 1279 px and lg begins at 1280 so if we have fxFlex .xs .md .lg .xl we covered all the possible screen sizes, right? No. because there is one pixel that belongs neither to lg nor to xl (lg ends on 1919px and xl starts at 1921), so if we have let's say
fxFlex=100% fxFlex.sm=70% fxFlex.md=50% fxFlex.lg=40% fxFlex.xl=20% and the screen becomes exactly 1920 pixel wide, our element will get the setting for extra small screen (100%), since 1920 is not large anymore, but not extra large yet. I know that I can use gt-lg instead, but what is the point of xl alias then? If we use xl than we could suddenly run into the difficult to reproduce "bug" for element being too big only if the screen size is exactly 1920 pixel wide. I find the situation confusing, I think the xl should either begin where lg ends or do not exist at all since gt-lg is practically the same. But I would prefer xl and gt-lg be exact aliases.

Am I missing something (since there is a comment in code with // should be distinct from 'gt-lg' range which points to the intentional difference between lg and xl)?

@ThomasBurleson ThomasBurleson added bug P2 Issue that is important to resolve as soon as possible labels Feb 2, 2017
@ThomasBurleson ThomasBurleson added this to the v2.0.0-rc.0 milestone Feb 2, 2017
@ThomasBurleson ThomasBurleson added the has pr A PR has been created to address this issue label Feb 5, 2017
ThomasBurleson added a commit that referenced this issue Feb 7, 2017
* alias `xl` now has mediaQuery == `screen and (min-width: 1920px) and (max-width: 5000px)`

fixes #149.
tinayuangao pushed a commit that referenced this issue Feb 8, 2017
* alias `xl` now has mediaQuery == `screen and (min-width: 1920px) and (max-width: 5000px)`

fixes #149.
karlhaas pushed a commit to karlhaas/flex-layout that referenced this issue May 3, 2017
…lar#159)

* alias `xl` now has mediaQuery == `screen and (min-width: 1920px) and (max-width: 5000px)`

fixes angular#149.
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 4, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug has pr A PR has been created to address this issue P2 Issue that is important to resolve as soon as possible
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants