Configuration option to disable full screen height in mobile

[kristiansamuelsson]

Describe the problem you'd like to have solved

Custom styles outside the login box hides login button in mobile view.

We want to display custom styles around the login box, and are using the container property to control where the login box is shown. When in mobile mode, the login container specifies height using vh which expands the form unnecessarily long and our content above the login form pushes everything down, causing the login button to be hidden behind a scroll.

Describe the ideal solution

Configuration option to disable setting the height on .auth0-lock-cred-pane-internal-wrapper, similar to overriding the css with this style:

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

Alternatives and current work-arounds

Overriding the css

We can force this behaviour by overriding the css styles as mentioned above, but this is against your recommendations and we would rather not pin lock to specific version.

Not placing content above the login form in mobile view

This limits our ability for branding and extra functions on the login screen (such as navigation back to start page). Using the back button in the browser does not work if we have forced a redirect to login because user tried to access a restricted page.

[stevehobbsdev]

Thanks for raising this @kristiansamuelsson. Just curious - can you let me know where the recommendation from us was made?

Normally the only reason we'd advise against it is because it gets difficult for us to debug your customizations, but we do offer Lock template customization as a "thing" you can do. If you're overriding one style rule on one element, I would actually recommend just putting in that style override as you mentioned. Does overriding this style completely fix your issue, or are there other changes to be made? Are you simply turning off the rule or setting it to some other value?

[kristiansamuelsson]

Hi @stevehobbsdev, thanks for the quick reply!

This page in the auth0 docs states

"Customizing your Lock by overriding its CSS isn't recommended. [...]"

The reasons listed seems sound, we would like to avoid extra testing and maintenance caused by messing with the product in unintended ways.

Does overriding this style completely fix your issue, or are there other changes to be made? Are you simply turning off the rule or setting it to some other value?

Yes, we are turning it off (by setting it to auto) and it solves the problem for us. On smaller devices/with keyboard and navigation bar visible we get a scroll bar on the page instead of inside the login form but I think that would be preferable for us.

[stevehobbsdev]

That's fair. We can add a property to turn this behaviour off without customizing the CSS.

I have added it to our internal backlog as a low-priority item - please continue to use your workaround until it can be implemented.

[kristiansamuelsson]

Okay thanks!

I got the impression from your first message there are other ways of template customization (outside the regular theming configuration). I can't find any in the docs, did I missunderstand or what would those ways be?

[stevehobbsdev]

@kristiansamuelsson I was referring to the template customization that's available through the Auth0 Dashboard, where you can select to customize the template and provide your own CSS and HTML. I think we're both talking about the same thing - sorry for the confusion!

[stale]

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! 🙇‍♂️

[stevehobbsdev]

Still in our backlog but will be worked on soon.