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


#1

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:

this.events.subscribe('user:authenticated', () =>{
  console.log('detected event -- user:authenticated');
  // setRoot clears the nav, so there is no back button or page history
  this.nav.setRoot(TabsPage);
})

from auth.service:

this.lock.on('authenticated', authResult => {
      console.log('authentication successful, set token to local storage');
      this.storage.set('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
          alert(error);
          return;
        }

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

        // set UserData to logged in
        this.userData.login(this.user['nickname']);
        
        // for some reason, it is necessary to wrap the event publication 
        // in a timeout, otherwise rivalsAuth fails
        setTimeout(()=> this.events.publish('user:authenticated', 'lock'));  
      });

      this.lock.hide();

      this.storage.set('refresh_token', authResult.refreshToken);
      this.zoneImpl.run(() => this.user = authResult.profile);
      
      console.log('finally, call scheduleRefresh()');
      // Schedule a token refresh
      this.scheduleRefresh();
    });    

Marc


#2

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.)

Thanks,
Marc


#4

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.


#5

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?

Thanks,
Marc


#6

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