Polymer Drawer Panel “nesting”

0
votes

New to Polymer here. I am trying to get the Polymer paper-drawer-panel and paper-header-panel to act in the same way the YouTube drawer panel and content act. Where the drawer panel is “nested” inside the content area (a topic discussed here: Polymer <paper-drawer-panel> nest 'drawer' inside 'main' ) of the header panel and the content to the right of the drawer scrolls independent of the drawer itself and when the drawer is opened the content is shuffled to the right.

Desired Result:

Drawer Closed enter image description here

I have achieved the “nested” styling however I am having trouble as the drawer and the content are scrolling together (the drawer disappears as you scroll down).

Actual Result:

Actual Result

Code:

  <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>

Additionally, the div “alotofcontent” is having the majority of its content cut off.

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

Any help is greatly appreciated.

1
polymerpolymer-1.0web-componentpaper-elements

1 Answers

0
votes

Try this

<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>