Раскладка приложения из полимерной бумаги

Question

Я довольно новичок в Polymer и работаю с app-box-template как часть учебника App Toolbox.

<app-location route="{{route}}"></app-location>
<app-route
    route="{{route}}"
    pattern="/:page"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>

<app-drawer-layout fullbleed>

<my-shared shared-data="{{sharedData}}"></my-shared>
  <!-- Drawer content -->
  <app-drawer>
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[routeData.page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="view1" href="/view1">View One</a>
      <a name="view2" href="/view2">View Two</a>
      <a name="view3" href="/view3">View Three</a>
      <a name="new-view" href="/new-view">Another View</a>
      <a name="order" href="/order">Order view</a>
    </iron-selector>
  </app-drawer>

  <!-- Main content -->
  <app-header-layout has-scrolling-region>

    <app-header condenses reveals effects="waterfall">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div title>Sam's App</div>
      </app-toolbar>
    </app-header>

    <iron-pages role="main" selected="[[routeData.page]]" attr-for-selected="name">
      <my-view1 name="view1" shared-data="{{sharedData}}"></my-view1>
      <my-view2 name="view2" shared-data="{{sharedData}}"></my-view2>
      <my-view3 name="view3"></my-view3>
      <my-new-view name="new-view"></my-new-view>
      <my-order name="order" shared-data="{{sharedData}}"></my-order>
    </iron-pages>

  </app-header-layout>

</app-drawer-layout>

На одной из страниц я создал элемент бумаги-диалога

<paper-button on-tap="toggleTestDialog">Toggle Test Dialog</paper-button>

  <paper-dialog id="idTestDialog" style="width: 100%; background-color: blue;">
    <h2>Dialog Title</h2>
    <div>Content to dialog</div>
  </paper-dialog> 

Когда ящик закрыт, диалоговое окно центрируется в главном разделе контента. Однако, когда ящик открыт, диалоговое окно не помещается в основной раздел контента, а закрывается ящиком. Я попытался использовать свойство positionTarget для позиционирования диалогового окна бумаги, но не смог отцентрировать диалоговое окно к основному разделу содержимого в теге app-header-layout. Я также добавил ширину: 100%, чтобы четко показать эту проблему., Я не уверен, правильно ли я использую positionTarget или есть еще одна проблема, которую мне не хватает.

toggleTestDialog: function () {
      this.$.idTestDialog.positionTarget = this.$.idContainingDiv;
      console.log(this.$.idTestDialog.positionTarget);

      this.$.idTestDialog.open();
    }