Полимерная панель ящика "гнездование"

Question

Новое для полимера здесь. Я пытаюсь получить Polymer paper-drawer-panel и paper-header-panel, чтобы действовать так же, как панель ячеек YouTube и контент действуют. Если панель ящика «вложена» внутри области содержимого (тема, обсуждаемая здесь: Polymer <paper-drawer-panel> nest 'drawer' inside 'main') панели заголовка и содержимое справа от прокрутки ящика, независимо от самого ящика, и когда ящик открыт, содержимое перетасовывается право.

Желаемый результат:

я достиг «вложенная» стиль, однако у меня возникают проблемы, как ящик и контента прокруткой вместе (ящик исчезает, как вы прокрутите вниз).

Фактический результат:

Код:

<paper-header-panel mode="waterfall" class="flex"> 
     <paper-toolbar> 
       <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> 
       <div class="title">Title</div> 
     </paper-toolbar> 
     <div class="content"> 
      <paper-drawer-panel id="drawerPanel"> 
       <paper-header-panel mode="scroll" drawer> 
        <paper-menu class="list"> 
         <paper-item>New item here</paper-item> 
         <paper-item>New item here</paper-item> 
        </paper-menu> 
       </paper-header-panel> 
       <div main> 
        <div id="mainPanelContent" class="alotofcontent"> 
        </div> 
       </div> 
      </paper-drawer-panel> 
     </div> 
    </paper-header-panel> 

Кроме того, ДИВ «alotofcontent» оказывает большинство его содержание отрезан.

.alotofcontent{ 
    width: 100%; 
    height: 25000px; 
} 

Любая помощь очень ценится.

Answer 1

Попробуйте

<link rel="import" href="./bower_components/polymer/polymer.html"> 
<link rel="import" href="./bower_components/paper-header-panel/paper-header-panel.html"> 
<link rel="import" href="./bower_components/paper-drawer-panel/paper-drawer-panel.html"> 
<link rel="import" href="./bower_components/paper-toolbar/paper-toolbar.html"> 
<link rel="import" href="./bower_components/paper-icon-button/paper-icon-button.html"> 
<link rel="import" href="./bower_components/iron-icons/iron-icons.html"> 
<link rel="import" href="./bower_components/paper-menu/paper-menu.html"> 
<link rel="import" href="./bower_components/paper-item/paper-item.html"> 
<dom-module id="header-drawer-combo"> 
    <template> 
    <style> 
     paper-drawer-panel { 
     --paper-drawer-panel-scrim: { 
      display: none; 
     }; 
     } 
     div [main]{ 
     background-color: lightcyan; 
     overflow: auto; 

     } 
     #mainPanelContent{ 
     width: 670px; 
     margin: 0 auto; 
     } 
    </style> 
    <paper-header-panel> 
     <paper-toolbar> 
     <paper-icon-button icon="menu" on-tap='flipDrawer'></paper-icon-button> 
     <div class="title">Title</div> 
     </paper-toolbar> 
     <div class="content"> 
     <paper-drawer-panel id='drawer' force-narrow> 
      <paper-header-panel mode="scroll" drawer> 
      <paper-menu class="list"> 
       <paper-item>New item here</paper-item> 
       <paper-item>New item here</paper-item> 
      </paper-menu> 
      </paper-header-panel> 
      <div main> 
      <div id="mainPanelContent" class="alotofcontent"> 
       Bacon ipsum dolor amet bacon ham hock ground round fatback tail ball tip shoulder tongue pancetta picanha shankle. Picanha sirloin shank t-bone bresaola pork loin pig capicola filet mignon pork chop leberkas. Corned beef doner chicken, meatloaf 
       t-bone turducken filet mignon pork pork chop jowl rump shoulder. Jerky bresaola t-bone pastrami doner. Jowl spare ribs sausage bresaola cow doner rump prosciutto, t-bone pig pastrami turducken ball tip ground round. Flank pig leberkas short ribs 
       bresaola shoulder. Doner ham tail, tongue kielbasa swine landjaeger ribeye. Ribeye boudin tail tenderloin. Jerky tri-tip shankle, kielbasa ham hock tenderloin ground round hamburger beef ribs venison. Ground round sirloin beef, flank kielbasa 
       capicola beef ribs swine tail strip steak corned beef pork chop rump. Boudin capicola chicken meatloaf venison andouille. Ribeye prosciutto sausage, porchetta cow beef ribs cupim jerky spare ribs alcatra meatball. Meatloaf chicken cupim fatback 
       sirloin. Meatloaf pancetta ham andouille, pork loin pastrami hamburger venison t-bone ribeye jerky meatball. Sausage chuck filet mignon shank tongue. Rump kevin flank hamburger fatback meatball jerky. Biltong drumstick prosciutto, shoulder meatloaf 
       cow tongue salami filet mignon beef ribs spare ribs meatball tri-tip ham hock short loin. Drumstick chicken strip steak alcatra shank frankfurter pork belly porchetta. Cupim swine salami rump. Short ribs short loin bacon pork porchetta tenderloin 
       swine, cow ham hock meatloaf. Meatloaf turducken pork belly flank venison, sausage pork ham. Meatloaf ham hock prosciutto, flank pork pastrami alcatra beef ribs fatback cow pork loin tenderloin bacon capicola short loin. Ham ham hock andouille 
       spare ribs. Prosciutto t-bone shankle pig salami brisket. Chuck doner porchetta capicola pig meatball pork belly pork andouille rump alcatra corned beef turducken. Spare ribs pastrami pancetta chuck alcatra hamburger ground round short ribs. Prosciutto 
       shoulder picanha doner corned beef, sirloin pork chop tongue pancetta short ribs cow chuck ball tip. Frankfurter pork rump bresaola ground round sirloin pancetta fatback kielbasa leberkas filet mignon pork chop boudin shankle pork belly. Kevin 
       swine andouille biltong, pork belly porchetta jerky corned beef short ribs beef ribs frankfurter. Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!Bacon ipsum dolor amet bacon ham hock ground round fatback tail ball tip shoulder tongue pancetta picanha shankle. Picanha sirloin shank t-bone bresaola pork loin pig capicola filet mignon pork chop leberkas. Corned beef doner chicken, meatloaf 
       t-bone turducken filet mignon pork pork chop jowl rump shoulder. Jerky bresaola t-bone pastrami doner. Jowl spare ribs sausage bresaola cow doner rump prosciutto, t-bone pig pastrami turducken ball tip ground round. Flank pig leberkas short ribs 
       bresaola shoulder. Doner ham tail, tongue kielbasa swine landjaeger ribeye. Ribeye boudin tail tenderloin. Jerky tri-tip shankle, kielbasa ham hock tenderloin ground round hamburger beef ribs venison. Ground round sirloin beef, flank kielbasa 
       capicola beef ribs swine tail strip steak corned beef pork chop rump. Boudin capicola chicken meatloaf venison andouille. Ribeye prosciutto sausage, porchetta cow beef ribs cupim jerky spare ribs alcatra meatball. Meatloaf chicken cupim fatback 
       sirloin. Meatloaf pancetta ham andouille, pork loin pastrami hamburger venison t-bone ribeye jerky meatball. Sausage chuck filet mignon shank tongue. Rump kevin flank hamburger fatback meatball jerky. Biltong drumstick prosciutto, shoulder meatloaf 
       cow tongue salami filet mignon beef ribs spare ribs meatball tri-tip ham hock short loin. Drumstick chicken strip steak alcatra shank frankfurter pork belly porchetta. Cupim swine salami rump. Short ribs short loin bacon pork porchetta tenderloin 
       swine, cow ham hock meatloaf. Meatloaf turducken pork belly flank venison, sausage pork ham. Meatloaf ham hock prosciutto, flank pork pastrami alcatra beef ribs fatback cow pork loin tenderloin bacon capicola short loin. Ham ham hock andouille 
       spare ribs. Prosciutto t-bone shankle pig salami brisket. Chuck doner porchetta capicola pig meatball pork belly pork andouille rump alcatra corned beef turducken. Spare ribs pastrami pancetta chuck alcatra hamburger ground round short ribs. Prosciutto 
       shoulder picanha doner corned beef, sirloin pork chop tongue pancetta short ribs cow chuck ball tip. Frankfurter pork rump bresaola ground round sirloin pancetta fatback kielbasa leberkas filet mignon pork chop boudin shankle pork belly. Kevin 
       swine andouille biltong, pork belly porchetta jerky corned beef short ribs beef ribs frankfurter. Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty! 
      </div> 
      </div> 
     </paper-drawer-panel> 
     </div> 
    </paper-header-panel> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 
    is:'header-drawer-combo', 
    flipDrawer:function(){ 
     this.$.drawer.togglePanel(); 
    } 
    }) 
</script> 


<header-drawer-combo></header-drawer-combo>