アプリのレイアウトで使用すると紙のバッジが間違った位置に表示されます

Question

私はapp-layout/app-drawer-layoutとapp-header/app-header-layout（下記のMWEを参照）とapp-layoutを使用しています。ペーパーバッジは、app-header内の要素に添付されています。ページが初めて読み込まれると、画面の右側に表示される正しい位置（問題＃12）に短く表示されます。ちょうど256pxがアプリの引き出しの正確なサイズです。

画面のサイズを変更すると、正しい位置に再計算されます。引出しが完全にロードされる前に位置が計算されていると思われます。

これは、アプリ引き出しが引き込まれて表示されていない場合には発生しません。

私はreadyPosition（）を実行しようとしましたが、それは助けになりませんでした。 updatePosition()にsetTimeoutを設定することで動作します

<template> 
<style is="custom-style"> 
    app-drawer { 
     --app-drawer-content-container: { 
      background-color: green; 
     }; 
    } 
    app-header { 
     background-color: yellow; 
    } 
</style> 

    <app-drawer-layout fullbleed> 

    <app-drawer slot="drawer"> 
     <div id="drawerbox">Navigation Drawer</div> 
    </app-drawer> 

    <div class="container"> 
     <app-header-layout> 
     <app-header id="header" condenses reveals effects="waterfall" slot="header"> 
      <app-toolbar id="toolbarheader"> 
       <div main-title id="toolbartitlebox">Title Toolbar</div> 
       <paper-icon-button id="discoursebutton" icon="communication:forum"></paper-icon-button> 
       <paper-badge for="discoursebutton" label="20" title="20 results"></paper-badge> 
      </app-toolbar> 
     </app-header> 
     </app-header-layout> 
    </div> 
    </app-drawer-layout> 
</template> 

一つハック：ここ

は私のMWEある

ready: function() { 
    var self = this; 
    setTimeout(function(){ 
    self.$$('paper-badge').updatePosition(); 
    }, 100); 
} 

しかし、これを解決するためのよりエレガントな方法は何ですか？ ご協力いただきありがとうございます！

Answer 1

一つの解決策は、app-drawer-layout後/ paper-badge外に置くことです。

<template> 
    <style> 
     app-drawer { 
     --app-drawer-content-container: { 
      background-color: green; 
     } 
     ; 
     } 

     app-header { 
     background-color: yellow; 
     } 

     paper-badge { 
     margin-top: 10px; 
     } 
    </style> 

    <app-drawer-layout fullbleed> 

     <app-drawer id="drawer" slot="drawer"> 
     <div id="drawerbox">Navigation Drawer</div> 
     </app-drawer> 


     <app-header-layout> 
     <app-header id="header" condenses reveals effects="waterfall" slot="header"> 
      <app-toolbar id="toolbarheader"> 
      <paper-icon-button id="toggle" on-tap="_onToggle" icon="menu"></paper-icon-button> 

      <div main-title id="toolbartitlebox">Title Toolbar</div> 
      <paper-icon-button id="discoursebutton" icon="inbox"></paper-icon-button> 
      <!-- <paper-badge for="discoursebutton" label="20" title="20 results"></paper-badge>--> 
      </app-toolbar> 
     </app-header> 
     </app-header-layout> 

     <div class="container"> 
     container 
     </div> 
    </app-drawer-layout> 

    <paper-badge for="discoursebutton" id="pd" label="20" title="20 results"></paper-badge> 
</template> 

Plnkr：http://plnkr.co/edit/V7zGBpqqzRonbAYyudea?p=preview