App-toolbar title translates outside of app-header

[esd100]

For example, if you look at the app-header contacts demo. Ignoring the picture background and just looking at the title. The title stays within the toolbar if you scroll down.

However on mine the transformation doesn't stay within the app-header toolbar while shrinking (during scrolling), and leaks outside the toolbar into the main content area of the app-header-layout.

It seems to be a bug in the way the title is translated. The translated y points for the title are coming out beyond the scrolled bottom y position of the toolbar.

[blasten]

@esd100 If you don't want the resize-title effect, you could remove that effect from the app-header's effects attribute. Otherwise, it might be missing the condensed-title element.

[esd100]

I don't want to not use it.

Condensed-title is there

[esd100]

Sorry that I couldn't post my code earlier, but below is a code snippet of my main page.

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="../bower_components/login-fire/login-fire.html">

<link rel="import" href="../src/nml-form.html">
<link rel="import" href="../src/nml-table.html">
<link rel="import" href="../src/nml-charts.html">
<link rel="import" href="../src/nml-contact.html">
<link rel="import" href="../src/nml-view404.html">
<link rel="import" href="../src/nml-icons.html">

<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.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-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-route/app-route.html">

<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">

<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../styles/nml-main-theme.html">

<dom-module id="nml-main">
  <template>
    <style is="custom-style" include="nml-main-theme"></style>

    <!-- this app-route manages the main-app routes -->
    <app-route
      route="{{route}}"
      pattern="/:page"
      data="{{routeData}}"
      tail="{{subroute}}">
    </app-route>

    <iron-media-query query="min-width: 1000px" query-matches="{{wideLayout}}"></iron-media-query>

    <firebase-auth
      id="auth"
      app-name="NML"
      user="{{user}}"
      provider="{{provider}}"
      status-known="{{statusKnown}}"
      signed-in="{{signedIn}}"
      on-error="errorHandler"
      on-user-created="userSuccessHandler">
    </firebase-auth>

    <app-drawer-layout fullbleed force-narrow>

      <!-- Drawer Panel-->
      <app-drawer id="drawer">
        <!-- Drawer Toolbar -->
        <app-toolbar id="drawerToolbar"><h2>Menu</h2></app-toolbar>
        <!-- Drawer Content -->
        <div>
          <!-- Drawer Menu for mobile / side nav menu -->
          <paper-menu id="drawerMenu" selected="{{page}}" attr-for-selected="name">
            <paper-icon-item name="charts">
              <iron-icon icon="home" item-icon></iron-icon>Home
            </paper-icon-item>
            <paper-icon-item name="form">
              <iron-icon icon="assignment" item-icon></iron-icon>Form
            </paper-icon-item>
            <paper-icon-item name="table">
              <iron-icon icon="list" item-icon></iron-icon>Logs
            </paper-icon-item>
          </paper-menu>
        </div>
      </app-drawer>

      <!-- Main Panel -->
      <app-header-layout>
        <!-- Main Toolbar -->
        <app-header condenses effects="material">
          <app-toolbar id="statusBar">
            <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
            <span></span>
            <paper-icon-button icon="[[computeLockIcon(signedIn)]]" disabled="[[!signedIn]]" on-tap="signOut"></paper-icon-button>
          </app-toolbar>

          <app-toolbar id="condensedBar">
            <div spacer condensed-title>Nuclear Medicine Experience Log</div>
          </app-toolbar>

          <app-toolbar id="mainBar">
            <div spacer main-title>Nuclear Medicine Experience Log</div>
          </app-toolbar>

          <!-- Show/Hide Toolbar Tabs for Mobile vs Desktop-->
          <app-toolbar id="tabBar" hidden$="{{!wideLayout}}">
            <!-- Nav on desktop: tabs -->
            <paper-tabs selected="{{page}}" attr-for-selected="name">
              <paper-tab name="charts">Home</paper-tab>
              <paper-tab name="form">Form</paper-tab>
              <paper-tab name="table">Logs</paper-tab>
            </paper-tabs>
          </app-toolbar>
        </app-header>

        <!-- Main Content -->
        <div id="mainContent">
          <iron-pages role="main" selected="[[page]]" attr-for-selected="name" fallback-selection="view404" selected-attribute="visible">
            <!-- home view -->
            <nml-charts name="charts"></nml-charts>
            <!-- Form view -->
            <nml-form name="form" user="[[user]]" log="{{log}}" log-id="{{logId}}"></nml-form>
            <!-- Table view -->
            <nml-table name="table" user="[[user]]"></nml-table>
            <nml-view404 name="view404"></nml-view404>
          </iron-pages>
        </div>
      </app-header-layout>
      <footer>
        <nml-contact></nml-contact>
      </footer>
    </app-drawer-layout>

  </template>

  <script>
  (function() {
    'use strict';

    Polymer({
      is: 'nml-main',

      behaviors: [
        Polymer.AppNetworkStatusBehavior,
        Polymer.IronResizableBehavior,
      ],

      properties: {
        user: {
          type: Object,
          reflectToAttribute: true,
        },

        signedIn: {
          type: Boolean,
          reflectToAttribute: true,
          value: false
        },

        page: {
          type: String,
          reflectToAttribute: true,
          observer: '_pageChanged'
        },

        items: {
          type: Array,
          value: function() {
            return ['Home', 'Form', 'Logs'];
          }
        },

        wideLayout: {
          type: Boolean,
          value: false,
          observer: 'onLayoutChange'
        }
      },

      observers: [
        '_routePageChanged(routeData.page)'
      ],

      listeners: {
      },

      ready: function() {
        console.log('nml-main is ready');
      },

      attached: function() {
        this.async(this.notifyResize, 1);
      },

      onLayoutChange: function(wide) {
        var drawer = this.$.drawer;
        if (wide && drawer.opened) {
          drawer.opened = false;
        }
      },

      _routePageChanged: function(page) {
        this.page = page || 'charts';
      },

      _pageChanged: function(page) {
        // Load page import on demand. Show 404 page if fails
        var resolvedPageUrl = this.resolveUrl('nml-' + page + '.html');
        this.importHref(resolvedPageUrl, null, this._showPage404, true);
      },

      _showPage404: function() {
        this.page = 'view404';
      },

      // Login Status Toolbar display
      computeLockIcon: function(signedIn) {
        if (signedIn) {
          var parent = Polymer.dom(document).querySelector('nml-app');
          var ironPage = Polymer.dom(parent.root).querySelector('iron-pages');
          ironPage.selected = "mainPage";
          return "lock-open";
        }
        else {
          var parent = Polymer.dom(document).querySelector('nml-app');
          var ironPage = Polymer.dom(parent.root).querySelector('iron-pages');
          ironPage.selected = "loginPage";
          return "lock";
        }
      },

      signOut: function() {
        var parent = Polymer.dom(document).querySelector('nml-app');
        var ironPage = Polymer.dom(parent.root).querySelector('iron-pages');
        ironPage.selected = "loginPage";
        var fbAuth = this.$.auth;
        fbAuth.signOut();
      },

    });
  })();
  </script>
</dom-module>

[esd100]

Any help with this would be appreciated. Thanks.

[blasten]

@esd100 would you mind sending a reduced test case? jsbin or anything?

[esd100]

@Blasten I have never done that before, so I don't know how.

Are you just wanting to see what it looks like? Maybe I can post an image or short video.

[frankiefu]

@esd100 What @blasten is looking for is a reduced test case that demonstrates the problem so we can run the test to see and debug the issue. The filing issues guidelines also has a jsbin template to help you to get started writing a reduced test case.

[esd100]

@frankiefu I'm sorry but I don't know how to make a reduced test case. I can post a video though.

https://monosnap.com/file/3iwb9E2duQR6RpSZ0AWTZUosI4vKiN

[frankiefu]

@esd100 I think I see the problem. There is a limitation currently in resize-title effect such that the condensed-title needs to be placed inside the top toolbar. You can try something like this:

<app-header condenses effects="material">
  <app-toolbar id="statusBar">
    <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
    <div spacer condensed-title>Nuclear Medicine Experience Log</div>
    <paper-icon-button icon="[[computeLockIcon(signedIn)]]" disabled="[[!signedIn]]" on-tap="signOut"></paper-icon-button>
  </app-toolbar>

  <app-toolbar id="condensedBar">
    <!-- <div spacer condensed-title>Nuclear Medicine Experience Log</div> -->
  </app-toolbar>

  <app-toolbar id="mainBar">
    <div spacer main-title>Nuclear Medicine Experience Log</div>
  </app-toolbar>
  .....

[esd100]

@frankiefu I think that solved the problem. Thanks for the temporary solution.

When I was looking at the code trying to figure it out, it seems like the root problem is somewhere in the calculations. It seems to be a bug in the way the title is translated. The translated y points for the title are coming out beyond the scrolled bottom y position of the toolbar.

That's way beyond me though.