Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

110
Views
How can I prevent firebase Web UI from scrolling down to the login section automatically?

When a user opens my website, I don't want the site scrolling down to the 'login' section automatically. I think that Firebase is scrolling down to the section when I perform:

var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start("#firebaseui-auth-container", uiConfig);

http://launchpad.behavioralsight.com/

How can I prevent it from doing this?

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

It doesn't seem like FirebaseUI can be configured to prevent scrolling. There is an open Github issue (and related StackOverflow question).

The scrolling happens in setupFocus_(). There are several versions depending on the widget type, but I think you are interested in passwordsignup.js.

The fix is quite simple: pass the preventScroll option to every call of focus() like this:

this.getEmailElement().focus({preventScroll:true});

If you want to get fancy, you can make this a configurable option of the AuthUI.start() method as suggested in the Github issue.


If you don't want to modify FirebaseUI, a work-around based on this related answer may work:

  1. Manually focus another element on your site (like the button.)
  2. Handle the focusout event as described in the answer above:

Before that, however, whatever had the focus will receive a "focusout" event of type FocusEvent. Suppose your event variable is e. The e.relatedTarget property will be populated with the element that's about to receive the focus. If you handle the "focusout" event by setting the focus back to the thing that's losing the focus e.target, then it will immediately re-receive the focus, along with a "focus" and "focusin" event, while the object that was going to receive the focus will neither receive the focus nor any focus events.

  1. Then remove this focusout handler so the login section can be focused after the initial auto focus.
about 4 years ago · Juan Pablo Isaza Report

0

Give this a try. It is preventing the field from even receiving focus since it isn't visible on the screen. Then after a second display the form.

HTML

<style>
  .loading #ui-sign-in-email-input { display: none; }
</style>
<div id="firebaseui-auth-container" class="loading"></div>
<div id="loader">Loading...</div>

JavaScript

...
uiShown: () => {
  setTimeout(() => {
    document.getElementById('firebaseui-auth-container').classList.remove('active');
  }, 500);
  document.getElementById('loader').style.display = "none";
},

...

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!