Nested Core-Scaffold and Multiple Vertical Scrollbars / Content Scrolling Extent Issues

[Kelly St. John]

I've posted the issue description along with a jsbin on Stack Overflow for your review:

http://stackoverflow.com/questions/27241020/polymer-nested-core-scaffold-and-multiple-vertical-scrollbars-scrolling-extent

[Rob Dodson]

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 <ke...@qfin.net> wrote:

I've posted the issue description along with a jsbin on Stack Overflow for your review:

http://stackoverflow.com/questions/27241020/polymer-nested-core-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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/18b4e43e-cf1b-46dd-8f43-451f69224d8d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Kelly St. John]

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

[Rob Dodson]

Do you want a visible drawer on desktop?

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/40ff0a77-11da-4a0f-9077-295da686228a%40googlegroups.com.

[Kelly St. John]

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!

[Rob Dodson]

Let's give this one a shot: http://jsbin.com/wiweta/20/edit

is that closer to what you're after?

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/5e2b3506-ed78-4f8a-8a46-0d6470e57c44%40googlegroups.com.

[Kelly St. John]

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

[Rob Dodson]

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?

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/41e14b6e-3ea1-4085-955d-ed8fc307a71a%40googlegroups.com.

[Kelly St. John]

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

[Rob Dodson]

If you want the options and page 01 bits to be fixed them i'm not sure the benefit of using core-scroll-header-panel. I would do something like this: http://jsbin.com/qahofi

Trying to put core-scaffold inside of core-pages inside of core-scroll-header-panel is going against the grain. I don't think core-scaffold was ever designed to be composed inside of a core-scroll-header-panel, and you're running into some scroll event weirdness. I'd recommend not going that route, and instead see if you can make your app work with core-drawer-panel

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/f4797ecf-abb1-4a38-82e5-92d62af600d4%40googlegroups.com.