css - Polymer Nested Core-Scaffold and Multiple Vertical Scrollbars / Scrolling Extent Issues -
i'm having trouble current layout of polymer site, regards nested components , associated scrollbars. i'll preface stating absolutely no means css guru. wish because wouldn't struggling as am. feel free jump straight jsbin url issue may become apparent.
the situation:
have nested core-scaffold element, main content requires vertical scrolling , it's vertical scrollbar becomes active required. however, nested, it's container(s) can have scrollbars enabled. ideally, i'd single scrollbar on highest level element can scroll scaffold's content it's full vertical extents, yet cause topbar slide away when scrolling down. i've noticed height of scaffold's main content determined first page loaded it. subsequent page loads different heights not cause scrollbar height extents change accordingly.
please note i've inserted iframe loading external content scaffold's content section purpose of jsbin demo. actual site loads bunch of data driven collapsible height containers within content pages, wrapping horizontally needed. due collapsibility, containing page therefore has dynamic height. height can vary page page container heights within them vary.
here jsbin. whoever can remove me css hell considered hero...
in initial jsbin sample code, you'll notice have specified core-pages height '100vh' top level polymer element (i.e. my-app-element). second level polymer element (i.e. my-scaffold-page-element), loads within aforementioned core-pages. therefore, nested scaffold element's maximum height 100vh. further down chain, when scaffold-element's main content area's height flows past host's height limitation, caused secondary 'inner' scrollbar appear, has different vertical extent original outer scrollbar...so trying use outer scrollbar alone doesn't scroll inner content entire vertical extent, forcing use inner scrollbar job done. ugly least.
now know case, 1 way reduce likelihood of inner scrollbar appearing nested scaffold element's main content area change it's parent element's core-pages height greater 100vh (400vh?). doing solves problem in roundabout way. outer scrollbar can used scroll entire vertical extent of nested scaffold's contents without inner scrollbar occurring.
in new jsbin example (below), can witness 'fix', happens remove reliance on core-scaffold, instead preferring utilize individual components in more configurable fashion.
Comments
Post a Comment