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.

Sign up for GitHub

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

Jump to bottom

v11 embedded height too large (100vh) on mobile #1709

Closed
camhart opened this issue Jul 24, 2019 · 8 comments
Closed

v11 embedded height too large (100vh) on mobile #1709

camhart opened this issue Jul 24, 2019 · 8 comments

Comments

@camhart
Copy link

camhart commented Jul 24, 2019 •
edited
Loading

Description

I'm embedding lock using the container option. When embedded and viewed on a mobile device in portrait mode, the div with class auth0-lock-cred-pane-internal-wrapper has a height of 100vh, which isn't correct. I believe it should be auto.

When 100vh is used, the lock "widget" is 100vh forcing the sign in button and other details to be cut off the screen if the lock "widget" doesn't start at height 0. For example, if you have a menu bar at the top.

Prerequisites

Environment

Please provide the following:

  • Lock version: 11.17.0
  • Browser version: chrome 75.0.3770.142
  • OS: windows 10
  • running in vue.js app using vuetify.

Reproduction

Embed the lock using the container option. Put anything above the container with a height > 0. View on mobile device or using chrome dev tools in portrait mode. The lock will force a scroll with a bunch of unnecessary whitespace.

Please include:

image
@camhart
Copy link
Author

camhart commented Jul 24, 2019 •
edited
Loading

For anyone else facing this, add this css and it should do the trick. Make sure it's not "scope" limited in anyway (like using scope keyword in Vuejs application). And yea, I know !important is gross. It gets the job done in this situation.

.auth0-lock-cred-pane-internal-wrapper {
  height: auto !important;
}

@camhart camhart changed the title v11 embedded height too large (100vh) v11 embedded height too large (100vh) on mobile Jul 24, 2019
@thisis-Shitanshu thisis-Shitanshu mentioned this issue Aug 15, 2019
Closed
@stale
Copy link

stale bot commented Oct 26, 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you have not received a response for our team (apologies for the delay) and this is still a blocker, please reply with additional information or just a ping. Thank you for your contribution! 🙇‍♂️

@stale stale bot added the closed:stale Issue or PR has not seen activity recently label Oct 26, 2019
@camhart
Copy link
Author

camhart commented Oct 26, 2019 •
edited
Loading

This is still an issue @Stale

@stale stale bot removed the closed:stale Issue or PR has not seen activity recently label Oct 26, 2019
@stevehobbsdev
Copy link
Contributor

@camhart apologies that this has taken so long to come around. We now have a PR that should hopefully fix this. Once it has been merged and released, I'll circle back around to verify that it has indeed fixed your issue.

#1785

@stevehobbsdev
Copy link
Contributor

This is now released in v11.20.4. Closing this for now, if you feel it hasn't solved your issue, please feel free to continue the discussion.

@Niclas1976
Copy link

Issue still remains, I think version is 11.26.

Solved it quick and dirty by adding this to the head of the Universal login HTML:

<head>
<style>
.auth0-lock-cred-pane-internal-wrapper {
  height: auto !important;
}
</style>
</head>

@brendanlong
Copy link

We're seeing this as well on v11.27 and v11.28. You can see our login page here: https://luminate.arena.io

Which looks like this if you make the window phone-sized:

Screen Shot 2021-01-26 at 17 05 38

@brendanlong
Copy link

Looking at #1785, I think the problem is that in our case we have HTML outside of the lock, so the logic correctly makes the lock the size of the entire screen, but that sizing isn't desirable unless the lock is the only thing on the screen. Is there a way to tell the lock that it doesn't own the screen? Auth0's universal login customization isn't very useful if we're not allowed to display anything except the lock.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@stevehobbsdev @brendanlong @camhart @Niclas1976