ポリマー1.1：ネオン・アニメーション・ページは、紙のタブ内で動作していないと紙ダイアログ

Question

テキストは外のダイアログ

Here is the plunk

を落下私はpaper-dialog内paper-tabsによって制御neon-animated-pagesを実装したいです。

私はpaper-dialog内部に含まtab-aとtab-bの内容を見て期待ではなく、内容がpaper-dialog外部に波及。

私には何が欠けていますか？

http://plnkr.co/edit/bPUclBOpghNFVmKMbOzc?p=preview

<link href="tab-a.html" rel="import"> 
<link href="tab-b.html" rel="import"> 

<base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/"> 
<link rel="import" href="polymer/polymer.html"> 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 

<link rel="import" href="paper-dialog/paper-dialog.html"> 
<link rel="import" href="paper-tabs/paper-tabs.html"> 
<link rel="import" href="iron-pages/iron-pages.html"> 
<link rel="import" href="neon-animation/neon-animation.html"> 
<link rel="import" href="neon-animated-pages/neon-animated-pages.html"> 

<dom-module id="content-el"> 
    <template> 
     <style></style> 

    <button on-tap="open">Open Dialog</button> 

    <paper-dialog id="dialog" modal> 
     <h2>Dialog Title</h2> 

     <paper-tabs selected="{{selected}}"> 
     <paper-tab>Tab 1</paper-tab> 
     <paper-tab>Tab 2</paper-tab> 
     </paper-tabs> 

     <neon-animated-pages selected="{{selected}}"> 
     <tab-a entry-animation="slide-from-left-animation" 
       exit-animation="slide-left-animation" 
     ></tab-a> 
     <tab-b entry-animation="slide-from-right-animation" 
       exit-animation="slide-right-animation" 
     ></tab-b> 
     </neon-animated-pages> 

    </paper-dialog> 

    </template> 

    <script> 
    (function() { 
     'use strict'; 
     Polymer({ 
     is: 'content-el', 

       behaviors: [ 
        Polymer.NeonAnimationRunnerBehavior, 
        Polymer.NeonAnimatableBehavior, 
        Polymer.IronResizableBehavior, 
       ], 

     properties: { 
      selected: { 
      type: Number, 
      value: 0 
      } 
     }, 
     open: function() { 
      this.$.dialog.open(); 
     }, 
     }); 
     })(); 
    </script> 
</dom-module> 

Answer 1

オフダイアログコンテンツが<neon-animated-pages>の内側にある、と<neon-animated-pages>を検査することは、何の高さは持っていないことが明らかになった：<paper-dialog>にCSSスタイルを適用し、これを修正するには

をし、 <neon-animated-pages>は幅/高さを設定します。ページにoverflowを設定してスクロールを許可します。たとえば、次のように

<dom-module id="content-el"> 
<template> 
    <style> 
    paper-dialog { 
     width: 75%; 
     min-width: 50vw; 
    } 
    neon-animated-pages { 
     margin: 2em; 
     height: 100%; 
     min-height: 25vh; 
     overflow: auto; 
    } 
    </style> 
    ... 
</template> 
</dom-module> 

plunker