Polymer app-header-layout forced update

Question

I have a Polymer app-layout setup with an app-header-layout inside an app-drawer-layout. I switch back and forth between various pages inside the contentContainer of the app-header-layout. I have different app-toolbars for different pages. The way app-layout works is that if you have a large toolbar, you just put 2 toolbars on top of each other like this:

    <app-toolbar>
       <div class="title" main-title><h1>Main Title</h1></div>
    </app-toolbar>
    <app-toolbar>
       <div class="title" main-title><p class="subtitle">Subtitle</p></div>
    </app-toolbar>

So some pages have 1 and others 2 toolbars. The problem is that the contentContainer of app-header-layout does not automatically adjust the padding-top value to the correct toolbar-height when you go back to a page you visited before. So if that is a page with 2 toolbars, the content of the page appears underneath the second toolbar.

So the question is: how do I force app-header-layout to recalculate it's values when the page is re-loaded?

This is probably something very easy but I just cannot find it. Thanks!

Here is an example. Not exactly the same but I think it illustrates the same problem.

<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">

<dom-module id="page-selector">
<template>
<style is="custom-style">
#toolbar1 {
  background-color:red;
}
#toolbar2 {
  background-color:green;
}
</style>
<app-drawer-layout fullbleed responsive-width="840px">

    <app-drawer slot="drawer">
        <div id="drawerbox"> 
                <h1>Menu</h1>
                <ol><li>Item 1</li>
                <li>Item 2</li></ol>
          </div>
        </div>
    </app-drawer>

    <div class="container">
      <app-header-layout>
        <app-header id="header" condenses reveals effects="waterfall" slot="header">
                <app-toolbar id="toolbar1">
                  <div main-title id="toolbartitlebox">Title Toolbar 1</div>
                  <div on-tap="_toggleToolbar">Toggle Toolbar</div>
                </app-toolbar>
                <template is="dom-if" if="{{Toolbar2}}">
                    <app-toolbar id="toolbar2">
                          <div class="title" main-title>Title toolbar 2</div>
                    </app-toolbar>
                </template>
        </app-header>

            <template is="dom-if" if="{{Toolbar1}}">
                <h1>This is Page 1</h1>
                <p>Some text for page 1</p>
            </template>

            <template is="dom-if" if="{{Toolbar2}}">
                <h1>This is text for Page 2</h1>
                <p>Some text for page 2</p>
            </template>

      </app-header-layout>
    </div>
    </app-drawer-layout>
</template>
<script>
    Polymer({
      is: 'page-selector',
  properties: {
        Toolbar1: {
          type: Boolean,
          value: true
        },
        Toolbar2: {
          type: Boolean,
          value: false
        }
    },
    _toggleToolbar: function() {
      this.Toolbar2 = !this.Toolbar2;
      if (this.Toolbar2) {this.Toolbar1 = false} else {this.Toolbar1 = true};
    }
    });
</script>
</dom-module>

Answer 1

The app-header-layout has a resetLayout() method which automatically recalculates the padding-top or margin-top, depending on the app-header-layout setup.

On each page load you could just do this:

this.shadowRoot.querySelector('app-header-layout').resetLayout();