Elements incorrectly placed in topBar, then moved to middleBar

TomFoyster commented 7 years ago

Description

Using Polymer with Aurelia as a SPA. When loading a new view into a child router that contains a paper-toolbar, elements that are set with a class of middle appear in topBar, until they're focused on or clicked when they then get moved into middleBar.

For example. here's the code when the page is loaded. You can see the paper-button's have a class of middle but are placed in the topBar. topbar

Then here's the markup when I've either left clicked, right clicked, or forced focus on one of the buttons. I actually see the elements move from topBar to middleBar in Inspect Element.

Here's my actual raw code;

  <footer>
      <iron-fit-behavior vertical-align="bottom" horizontal-align="left">
        <paper-toolbar class="footer" ref="ftrControls">
          <paper-button id="btnGeneral" ref="btnGeneral" click.delegate="goToPage(0)" class="${selectedFormPage == 0? 'active':''} middle footer-button">
            <iron-icon class="custom" icon="view-carousel"></iron-icon>General</paper-button>
          <paper-button id="btnAddresses" ref="btnAddresses" click.delegate="goToPage(1)" class="${selectedFormPage == 1? 'active':''} middle footer-button">
            <iron-icon class="custom" icon="view-carousel"></iron-icon>Addresses</paper-button>
          <!--<paper-button id="btnLinkedSuppliers" ref="btnLinkedSuppliers" click.delegate="linkedSuppliers()" class="middle footer-button">
            <iron-icon class="custom" icon="view-carousel"></iron-icon>Linked Suppliers</paper-button>-->
        </paper-toolbar>
      </iron-fit-behavior>
    </footer>

TomFoyster commented 7 years ago

5 days - is there any chance of feedback on this?

TomFoyster commented 7 years ago

13 days...

PolymerElements / paper-toolbar

Elements incorrectly placed in topBar, then moved to middleBar #97

Description