Using nav.setRoot causes scroll-content to be missing margins for header/footer


I’m using the nav.setRoot method after login to clear the nav stack and nav to the correct starting page, and everything works dandy, except for one thing… the margin-top and margin-bottom element styles on the scroll-content are missing. If I nav to another page and back the margins reappear. Any thoughts?

from app.component:'user:authenticated', () =>{
  console.log('detected event -- user:authenticated');
  // setRoot clears the nav, so there is no back button or page history

from auth.service:

this.lock.on('authenticated', authResult => {
      console.log('authentication successful, set token to local storage');'id_token', authResult.idToken);
      this.idToken = authResult.idToken;
      this.refreshToken = authResult.refreshToken;
      console.log('stored id, refresh', this.idToken, this.refreshToken);

      // Fetch profile information
      console.log('get profile');
      this.lock.getProfile(authResult.idToken, (error, profile) => {
        if (error) {
          // Handle error

        profile.user_metadata = profile.user_metadata || {};'profile', JSON.stringify(profile));
        console.log('set profile', profile);
        this.user = profile;
        // extraneous
        this.userString = JSON.stringify(profile);

        // set UserData to logged in
        // for some reason, it is necessary to wrap the event publication 
        // in a timeout, otherwise rivalsAuth fails
        setTimeout(()=>'user:authenticated', 'lock'));  

      this.lock.hide();'refresh_token', authResult.refreshToken); => this.user = authResult.profile);
      console.log('finally, call scheduleRefresh()');
      // Schedule a token refresh



One other curious thing is that when setting the navRoot after login it takes me to a page with a back button that, when pressed, simply dumps me in the same view (but with the margins in place). Shouldn’t there not be a back button if I am truly at the bottom of the nav stack? I’m confused.

One more thing --> is there some reason why you can’t set navRoot multiple times in the course of an app flow? I have already set the navRoot on startup based on authentication conditions, and wish to do so again for a login or logout. (Logout navRoot works fine, btw.)



OK, update on solutions:

  1. See solution to the double page instantiation here:
    After setRoot(TabsPage), the default tab page appears twice

  2. I have temporarily solved the missing headers problem by adding some scss to the page’s .scroll-content. Not a great fix, but working for the time being.


So… update on this – all was well until I added a FAB to my root page, and now my temporary fix is again deficient. When I use setRoot after a login, all is well except my FAB is under my footer. Having to add quite a bit of non-responsive scss to fix this little problem.

Sorry to bug you @mhartington but you seem to answer most of my questions – any idea why this might be happening?



Not really sure from the information you’ve given. Can you provide a smaller demo to look at and push it to github?