css - polymer core-animated-pages how to set background with scrollable content -


i using core-animated-pages. of the content on pages need scrolled. want set background color pages , want background color cover scrolled area , not current viewport. how accomplish this?

more have:

<core-animated-pages flex transitions="cross-fade-all"> <div>some small content</div> <div>some long text need scrolled</div> <div>another page</div> </core-animated-pages> 

so how style background color cover scrolled text?

@jeff provides large part of answer in specifying relative on div. additionally used following css position element clear of title bar above , ensure background covers reminder of page.

#instructions {   background: #fff59d;   min-height: calc(100vh - 200px);   top:+30px;   padding:10px;   width:calc(100% - 24px); } 

the pixels subtracted % values , top:+ allow menu bar @ top , padding on body -- these need adjust depending on height of menu bar , padding.

now wrap divs in paper-shadow find when lose background. how can apply paper-shadow effect divs?

the <content> within <core-animated-pages> styled position: absolute + top/right/bottom/left: 0. you're not providing rest of html structure , other styles have defined, i'm assuming that's what's causing you're seeing.

try styling dom element represents page use position: relative (you can assigning polymer-shorthand relative attribute):

<!doctype html>  <html>    <head>      <meta charset="utf-8">      <title>polymer core-animated-pages demo</title>      <style>        core-animated-pages > div {          background-color: orange;        }      </style>    </head>        <body>      <script src="//www.polymer-project.org/webcomponents.js"></script>      <link rel="import" href="//www.polymer-project.org/components/core-animated-pages/core-animated-pages.html">            <core-animated-pages selected="1" transitions="cross-fade-all">        <div>some small content</div>        <div relative>          <h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1><h1>blah</h1>        </div>        <div>another page</div>      </core-animated-pages>    </body>  </html>


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -