Fix for login button being cut off on some mobile devices #1785
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Galaxy Note 8
|
|
Galaxy S6 (Chrome)
|
|
Galaxy S9 (Chrome)
|
|
OnePlus 6T (Chrome)
|
|
Pixel 1 (Chrome)
|
stevehobbsdev
changed the title
joshcanhelp
previously approved these changes
Jan 22, 2020
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 */ | |||
There was a problem hiding this comment.
I'm not very familiar with styl files but I would guess that this could be a mixin or something to avoid duplication?
There was a problem hiding this comment.
Yes it can! Thanks for the idea. I've moved it into a mixin now.
joshcanhelp
approved these changes
Jan 23, 2020
jfromaniello
pushed 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
pushed 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.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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