Fix for login button being cut off on some mobile devices #1785
Conversation
|
Small comment about duplication but not a show stopper |
css/index.styl
Outdated
| @@ -1048,7 +1049,8 @@ loadingSize = 30px | |||
| .auth0-lock-widget-container | |||
| //mobile view | |||
| @media screen and (max-width: 480px) | |||
| height 100% | |||
| height 100vh /* Support browsers where custom properties are not supported */ | |||
joshcanhelp
Jan 22, 2020
Member
I'm not very familiar with styl files but I would guess that this could be a mixin or something to avoid duplication?
I'm not very familiar with styl files but I would guess that this could be a mixin or something to avoid duplication?
stevehobbsdev
Jan 23, 2020
Author
Contributor
Yes it can! Thanks for the idea. I've moved it into a mixin now.
Yes it can! Thanks for the idea. I've moved it into a mixin now.
b474e38
into
master
3 checks passed
3 checks passed
license/snyk - package.json (auth0-sdks)
No manifest changes detected
security/snyk - package.json (auth0-sdks)
No manifest changes detected
jfromaniello
added a commit
to jfromaniello/auth0-lock
that referenced
this pull request
Mar 5, 2020
* Calculated real container height for mobile * Moved height calculation into a mixin
jfromaniello
added a commit
to jfromaniello/auth0-lock
that referenced
this pull request
Jul 23, 2020
* Calculated real container height for mobile * Moved height calculation into a mixin
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.





Changes
This PR resolves an issue on mobile where the login button was being cut off towards the bottom of the screen. This PR implements the technique on CSS Tricks to dynamically calculate the screen height and apply that to a custom variable on
:rootwhere it can be picked up by the CSS. It uses100vhas a fallback for those browsers that do not support custom variables.See screenshots in comments.
References
Fixes #1706
Partial fix for #1783
Testing
This has been tested manually on:
Samsung Galaxy S6 (Chrome, Firefox)
Samsung Galaxy S9 (Chrome, Firefox)
Samsung Galaxy Note 8 (Chrome)
Pixel 1 (Chrome)
OnePlus 6T
Chrome Desktop
Firefox Desktop
IE11
This change adds unit test coverage
This change adds integration test coverage
This change has been tested on the latest version of the platform/language
Checklist