20909

Polymer nest 'drawer' inside 'main'

Question:

Alright, so as I see it, the proper element nesting for paper-drawer-panel should be something like this:

<paper-drawer-panel> <paper-header-panel drawer> <!-- Side bar content --> <paper-menu>......</paper-menu> </paper-header-panel> <paper-scroll-header-panel main> <paper-toolbar class="tall"> </paper-toolbar> <div class="main-content"> <!-- Main app body content here --> </div> <!-- Main body content --> </paper-drawer-panel>

The above hierarchy will give you something like this (current template for site I'm working on):

<a href="https://i.stack.imgur.com/lBBKp.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/lBBKp.png" data-original="https://i.stack.imgur.com/lBBKp.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

However this is what I am trying to achieve:

<a href="https://i.stack.imgur.com/UynsG.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/UynsG.png" data-original="https://i.stack.imgur.com/UynsG.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

Now, I can get it to look how I want to (hence the screenshot) however, problem is it does not act right at all. Here is the code for the above ideal, yet non-functional layout:

<paper-scroll-header-panel condenses keep-condensed-header> <paper-toolbar class="tall"> <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> <div class="flex"></div> <div class="bottom title">Dom Farolino</div> </paper-toolbar> <div class="content"> <paper-drawer-panel> <paper-header-panel mode="scroll" drawer> <paper-toolbar id="navheader" class="tall"> <img class="middle profile" hidden> <div class="bottom layout vertical"> <span>Dom Farolino</span> <span>domfarolino@gmail.com</span> </div> </paper-toolbar> <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> <content id="objects" select="*"></content> </div> </paper-drawer-panel> </div> </paper-scroll-header-panel>

As I said, it is not even close to properly functioning. For starters, I cannot toggle the drawer in and out with the obvious on-screen button. This is no surprise because the component designated as my paper-drawer-toggle is not even in the paper-drawer-panel component. Also any components placed inside this larger component that appear inside the <content> component are not placed properly inside the body.

I really curious as to how I can achieve functionality with the second layout because I prefer that one over the first one. Perhaps my layout is wrong and maybe I shouldn't even be using <paper-drawer-panel> and maybe I should be using a drawer separately from all of this if that is possible. I'm quite new to polymer and am in an experimenting phase however if anyone can point me in the right direction to get me on the right track with this layout that would be great! Thanks!

Answer1:

<blockquote>

I cannot toggle the drawer in and out with the obvious on-screen button.

</blockquote>

You can attach an event listener to it and call the togglePanel method of your paper-drawer-panel.

<blockquote>

any components placed inside this larger component that appear inside the component are not placed properly inside the body

</blockquote>

You might need to declare the height and width of your .content div along with its position (most likely relative). However, this do tend to ignore the use of your paper-scroll-header-panel's scrolling effects due to paper-drawer-panel being an absolutely positioned element.

Here's a working example.

<pre class="snippet-code-html lang-html prettyprint-override"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <base href="https://polygit2.appspot.com/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="paper-scroll-header-panel/paper-scroll-header-panel.html"> <link rel="import" href="paper-toolbar/paper-toolbar.html"> <link rel="import" href="iron-icons/iron-icons.html"> <link rel="import" href="paper-icon-button/paper-icon-button.html"> <link rel="import" href="paper-drawer-panel/paper-drawer-panel.html"> <link rel="import" href="paper-header-panel/paper-header-panel.html"> <link rel="import" href="paper-menu/paper-menu.html"> <link rel="import" href="paper-item/paper-item.html"> <link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html"> <style is="custom-style"> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .red { width: 100%; height: 100%; background-color: red; font-size: 14pt; line-height: 2em; color: #fff; } </style> </head> <body class="fullbleed"> <dom-module id="my-app"> <template> <style> :host { display: block; width: 100%; height: 100%; } paper-scroll-header-panel { width: 100%; height: 100%; } /* 'Cause css positioning sucks */ .content { width: 100%; height: 100%; position: relative; overflow-y: auto; } </style> <paper-scroll-header-panel condenses keep-condensed-header> <paper-toolbar class="tall"> <!-- Attach an event listener here --> <paper-icon-button icon="menu" on-tap="toggleDrawer"></paper-icon-button> <div class="flex"></div> <div class="bottom title">Dom Farolino</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 class="fit"> <content select="*"></content> </div> </paper-drawer-panel> </div> </paper-scroll-header-panel> </template> <script> Polymer({ is: 'my-app', toggleDrawer: function() { this.$.drawerPanel.togglePanel(); console.log('Toggled'); } }); </script> </dom-module> <my-app> <div class="red"> <div>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> </my-app> </body> </html>

Recommend

  • emile.js and xui animation needing double click?
  • Cannot load servlet class: org.primefaces.resource.ResourceServlet
  • Group By and add columns
  • How to mount dynamically single file component in Vue.js
  • Can statically compiled languages replace scripting language?
  • LatLong falls within a given polygon in D3 + Leaflet
  • Remove every nth element from swift array
  • Absolutely positioned pseudo element inside table cell does not cover parent in IE9/10
  • Is it possible to generate a unique numeric value for each row in an iSeries table without looping?
  • Trouble Attaching Call Back to Unobtrusive Validation Show Error
  • Fluid video height
  • Can't find cygwin setup.exe file?
  • Nested not working on slide
  • How to resend request with android volley when not authorized
  • Imports in __init__.py and `import as` statement
  • why 0.1+0.2-0.3= 5.5511151231258E-17 in php [duplicate]
  • Removing event listeners on automatically created multiple elements
  • SQL - Select lowest values with group by and order by?
  • Java making confirming exit
  • Cypher - matching two different possible paths and return both
  • Clarification on min distance on LocationManager.requestLocationUpdates method, min Distance paramet
  • d3 v4 drag and drop with TypeScript
  • JQuery Internet Explorer and ajaxstop
  • Yii2: Config params vs. const/define
  • Handling un-mapped Rest path
  • Paperclip, set path outside of rails root folder
  • formatting the colorbar ticklabels with SymLogNorm normalization in matplotlib
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • Incrementing object id automatically JS constructor (static method and variable)
  • script to move all files from one location to another location
  • Trying to switch camera back to front but getting exception
  • Free memory of cv::Mat loaded using FileStorage API
  • Angular 2 constructor injection vs direct access
  • Memory offsets in inline assembly
  • Change div Background jquery
  • How does Linux kernel interrupt the application?
  • Linking SubReports Without LinkChild/LinkMaster
  • Programmatically clearing map cache
  • Busy indicator not showing up in wpf window [duplicate]
  • Why do underscore prefixed variables exist?