Hi Rob, Yes, your summary of the situation is accurate. I have now updated the jsbin (see below), incorporating your suggested solution as well as my previous core-pages height 'fix', to reflect the current state of the site and the remaining scrolling issues. I've also reduced the sample code somewhat to make it clearer. With the core-pages height at 400vh, it is harder to make the inner scrollbar appear, but it is of course still possible depending on the 'main' contents and the size of the user's viewport. A smaller viewport with this jsbin still shows the problem I was originally mentioning. With this new core-pages height, I can avoid the inner scrollbar from appearing on my site as the content I am loading is of known height. However, if you know a better way to accomplish that I'm all ears for sure!
That issue aside, and presuming the increased height of core-pages is a sufficiently suitable fix, the problem now is that the drawer header(s) displaying 'Options' and 'Page 01', now scroll with the content. I'd like to fix these in place if possible, and only scroll the content itself. Here's the updated jsbin for your reference: http://jsbin.com/muniqi/3/ Cheers, Kelly On Friday, 5 December 2014 11:09:43 UTC-8, Rob Dodson wrote: > > It would help if you could reduce this for me. > > It sounds like you're trying to put core-scaffold inside of core-pages and > then put all of that inside of core-header-panel. And that is causing > scrollbar weirdness? > > On Thu, Dec 4, 2014 at 8:33 PM, Kelly St. John <[email protected] > <javascript:>> wrote: > >> Not really...but sort of... :-) Read on... >> >> Your example removed the reliance on the 'core-scaffold'. Rather, it >> seems you went about using it's individual components to recreate similar, >> but slightly different behaviour. In trying to implement your example into >> my existing site, it highlighted for me what was causing the appearance of >> multiple scrollbars. In my initial jsbin sample code, you'll notice I have >> specified core-pages height as '100vh' the top level polymer element (i.e. >> my-app-element). The second level polymer element (i.e. >> my-scaffold-page-element)...which it seems you've been focusing on >> fixing...loads within the aforementioned core-pages. Therefore, the nested >> scaffold element's *maximum* height is 100vh. Further down the chain, >> when the scaffold-element's main content area's height flows past its >> host's height limitation, it caused a secondary 'inner' scrollbar to >> appear, which has a different vertical extent than the original outer >> scrollbar...so trying to use the outer scrollbar alone doesn't effectively >> scroll the inner content to its entire vertical extent...forcing you to use >> the inner scrollbar as well to get the job done. Ugly to say the least. >> >> Now that I know that is the case, one way to reduce the likelihood of an >> inner scrollbar appearing for the nested scaffold element's main content >> area is to change it's parent element's core-pages height to something much >> greater than 100vh (300 or 400vh perhaps?). Doing so solves the problem in >> a roundabout way. The outer scrollbar can now be used to scroll the entire >> vertical extent of the nested scaffold's contents without an inner >> scrollbar occurring. However, there is a catch... >> >> It creates a side-effect I don't much like. Now, I cannot seem to 'fix' >> the drawer panel's header/main content toolbar (using your solution code) >> in place so they do not scroll with the content. I've tried setting >> different modes on core-header-panel and also tried using >> core-scroll-header-panel in place of core-header-panel along with it's >> 'fixed' attribute enabled...but no dice! >> >> If this isn't a clear explanation, just let me know and I can update the >> jsbin with what I currently have. >> >> Thanks again Rob, >> >> Kelly >> >> >> >> On Thursday, 4 December 2014 17:48:29 UTC-8, Rob Dodson wrote: >>> >>> Let's give this one a shot: http://jsbin.com/wiweta/20/edit >>> >>> is that closer to what you're after? >>> >>> On Thu, Dec 4, 2014 at 5:42 PM, Kelly St. John <[email protected]> wrote: >>> >>>> Hi Rob, >>>> >>>> Yes, I'd like to have a visible drawer / side menu on desktop that >>>> slides away on mobile, and on mobile can be reopened via swipe or via >>>> tapping drawer icon (default scaffold functionality I believe). >>>> >>>> Thanks again for looking into this for me! >>>> >>>> >>>> On Thursday, 4 December 2014 17:35:10 UTC-8, Rob Dodson wrote: >>>>> >>>>> Do you want a visible drawer on desktop? >>>>> >>>>> On Wed, Dec 3, 2014 at 4:14 PM, Kelly St. John <[email protected]> wrote: >>>>> >>>>>> Hi Rob, >>>>>> >>>>>> Thanks again for the reply. To clarify, I'm not necessarily looking >>>>>> for the left menu header (drawer header) to collapse along with the >>>>>> content >>>>>> of the main page. Currently, core-scroll-header-panel is the top level >>>>>> element (#appHeader), which has the scrollAwayTopbar attribute >>>>>> set...hence >>>>>> it slides away when the outside scrollbar is utilized (desired >>>>>> behaviour). >>>>>> That said, the problem is the the same outer scrollbar does not >>>>>> currently >>>>>> scroll the inner content (i.e. within the scaffold main content) to its >>>>>> full vertical extent. >>>>>> >>>>>> I hope that description helps... >>>>>> >>>>>> Kelly >>>>>> >>>>>> On Wednesday, 3 December 2014 14:59:12 UTC-8, Rob Dodson wrote: >>>>>>> >>>>>>> Hm... I can get part of the way there: http://jsbin.com/wiweta >>>>>>> /17/edit >>>>>>> >>>>>>> However I'm not sure how to make the menu header collapse along with >>>>>>> the content of the main page. Frankie do you have any ideas? >>>>>>> >>>>>>> On Tue, Dec 2, 2014 at 10:29 AM, Kelly St. John <[email protected]> >>>>>>> wrote: >>>>>>> >>>>>>>> I've posted the issue description along with a jsbin on Stack >>>>>>>> Overflow for your review: >>>>>>>> >>>>>>>> http://stackoverflow.com/questions/27241020/polymer-nested-c >>>>>>>> ore-scaffold-and-multiple-vertical-scrollbars-scrolling-extent >>>>>>>> >>>>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>>>>>>> --- >>>>>>>> You received this message because you are subscribed to the Google >>>>>>>> Groups "Polymer" group. >>>>>>>> To unsubscribe from this group and stop receiving emails from it, >>>>>>>> send an email to [email protected]. >>>>>>>> To view this discussion on the web visit >>>>>>>> https://groups.google.com/d/msgid/polymer-dev/18b4e43e-cf1b- >>>>>>>> 46dd-8f43-451f69224d8d%40googlegroups.com >>>>>>>> <https://groups.google.com/d/msgid/polymer-dev/18b4e43e-cf1b-46dd-8f43-451f69224d8d%40googlegroups.com?utm_medium=email&utm_source=footer> >>>>>>>> . >>>>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>>>> >>>>>>> >>>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>>>>> --- >>>>>> You received this message because you are subscribed to the Google >>>>>> Groups "Polymer" group. >>>>>> To unsubscribe from this group and stop receiving emails from it, >>>>>> send an email to [email protected]. >>>>>> To view this discussion on the web visit https://groups.google.com/d/ >>>>>> msgid/polymer-dev/40ff0a77-11da-4a0f-9077-295da686228a%40googl >>>>>> egroups.com >>>>>> <https://groups.google.com/d/msgid/polymer-dev/40ff0a77-11da-4a0f-9077-295da686228a%40googlegroups.com?utm_medium=email&utm_source=footer> >>>>>> . >>>>>> >>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>> >>>>> >>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>>> --- >>>> You received this message because you are subscribed to the Google >>>> Groups "Polymer" group. >>>> To unsubscribe from this group and stop receiving emails from it, send >>>> an email to [email protected]. >>>> To view this discussion on the web visit https://groups.google.com/d/ >>>> msgid/polymer-dev/5e2b3506-ed78-4f8a-8a46-0d6470e57c44% >>>> 40googlegroups.com >>>> <https://groups.google.com/d/msgid/polymer-dev/5e2b3506-ed78-4f8a-8a46-0d6470e57c44%40googlegroups.com?utm_medium=email&utm_source=footer> >>>> . >>>> >>>> For more options, visit https://groups.google.com/d/optout. >>>> >>> >>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >> --- >> You received this message because you are subscribed to the Google Groups >> "Polymer" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected] <javascript:>. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/polymer-dev/41e14b6e-3ea1-4085-955d-ed8fc307a71a%40googlegroups.com >> >> <https://groups.google.com/d/msgid/polymer-dev/41e14b6e-3ea1-4085-955d-ed8fc307a71a%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> >> For more options, visit https://groups.google.com/d/optout. >> > > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/f4797ecf-abb1-4a38-82e5-92d62af600d4%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
