Perhaps this topic on SO will be of some help: http://stackoverflow.com/questions/25629400/polymer-core-scaffold-element-not-showing-inside-core-pages
On Thursday, 28 August 2014 09:56:12 UTC-7, Seonman Kim wrote: > > Hi, > > I want animated page switching using <core-animated-pages>. I created two > sample polymer-elements : one is <login-memu> and the other is <all-page> > which is based on <core-scaffold>. > However, <core-scaffold> page does not display within the > <core-animated-pages>. It shows nothing. > Below is the codes that I tested with. Can you identify what is wrong? > (all-page.html is based on the sample code of > http://www.polymer-project.org/components/core-scaffold/demo.html. > > Thanks, > Seonman > > —— index.html — > <!doctype html> > <html> > <head> > <title>SVList App</title> > > <meta name="viewport" content="width=device-width, initial-scale=1.0, > maximum-scale=1.0"> > <meta name="mobile-web-app-capable" content="yes"> > <meta name="apple-mobile-web-app-capable" content="yes"> > > <script src="../components/platform/platform.js"></script> > <link rel="import" href="../components/polymer/polymer.html"> > <link rel="import" > href="../components/core-animated-pages/core-animated-pages.html"> > <link rel="import" > href="../components/core-animated-pages/transitions/slide-from-right.html"> > <link rel="import" > href="../components/core-animated-pages/transitions/cross-fade.html"> > <link rel="import" > href="../components/core-header-panel/core-header-panel.html"> > <link rel="import" href="../components/core-menu/core-menu.html"> > <link rel="import" href="../components/core-item/core-item.html"> > <link rel="import" > href="../components/core-header-panel/core-header-panel.html"> > <link rel="import" href="../components/core-toolbar/core-toolbar.html"> > <link rel="import" href="../components/paper-input/paper-input.html"> > <link rel="import" href="../components/paper-button/paper-button.html"> > <link rel="import" > href="../components/core-drawer-panel/core-drawer-panel.html"> > <link rel="import" > href="../components/core-scaffold/core-scaffold.html"> > > <link rel="import" href="login-menu.html"> > <link rel="import" href="my-counter.html"> > <link rel="import" href="drawer-panel.html"> > <link rel="import" href="all-page.html"> > > <style> > html, body { > height: 100%; > font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; > margin: 0; > padding: 5px; > } > > </style> > </head> > > <body> > > <core-animated-pages valueattr="label" selected="login" > transitions="slide-from-right"> > <section label="login"> > <login-menu label="login"></login-menu> > </section> > <section label="all-page"> > <all-page></all-page> > </section> > </core-animated-pages> > > <script></script> > </body> > </html> > > ——— login-menu.html — > <polymer-element name="login-menu"> > <template> > <style> > html, body { > height: 100%; > font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; > margin: 0; > padding: 5px; > } > > core-header-panel { > font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; > width: auto; > height: 500px; > } > > paper-input { > margin: 1em; > width: auto; > } > > paper-button { > margin: 1em; > width: 15em; > } > > paper-button.colored { > color: #4285f4; > fill: #4285f4; > } > paper-button[raisedButton].colored { > background: #4285f4; > color: #fff; > } > > paper-button[raisedButton].colored #ripple, > paper-button[raisedButton].colored::shadow #ripple { > color: #2a56c6; > } > paper-button[raisedButton].colored #focusBg, > paper-button[raisedButton].colored::shadow #focusBg { > background: #3367d6; > } > > div .space { > height: 20px; > } > </style> > > <core-header-panel> > <core-toolbar> > <div>Login</div> > </core-toolbar> > <div layout vertical center center-justified> > <paper-input floatinglabel label="User Name:"></paper-input> > <paper-input floatinglabel type="password" label="Password:"></paper-input> > <paper-button raisedButton class="colored" label="Submit" > on-tap="{{submit}}"></paper-button> > <a href="">Forget password?</a> > <div class="space"></div> > <paper-button raisedButton label="Create Account" > on-tap="{{createAccount}}"></paper-button> > </div> > </core-header-panel> > > </template> > > <script> > Polymer('login-menu', { > publish: { > }, > submit: function() { > console.log("submit"); > var p = document.querySelector('core-animated-pages'); > console.log(p); > p.selected = "all-page"; > }, > createAccount: function() { > console.log("createAccount"); > } > }); > </script> > </polymer-element> > > ———— all-page.html —— > > <polymer-element name="all-page"> > <template> > <style> > html, body { > height: 100%; > margin: 0; > } > > body { > font-family: sans-serif; > } > > core-scaffold { > position: absolute; > top: 0; > right: 0; > bottom: 0; > left: 0; > } > > .content { > background-color: #fff; > height: 300px; > padding: 20px; > } > > > /* some default styles for mode="cover" on core-scaffold */ > core-scaffold[mode=cover]::shadow core-header-panel::shadow > #mainContainer { > left: 120px; > } > > core-scaffold[mode=cover] .content { > margin: 20px 100px 20px 0; > } > > </style> > > > <core-scaffold> > <core-header-panel navigation flex mode="seamed"> > <core-toolbar style="background-color: #526E9C; color: > #fff;">Settings</core-toolbar> > <core-menu> > <core-item icon="settings" label="Lists"></core-item> > <core-item icon="settings" label="Custom Lists"></core-item> > </core-menu> > </core-header-panel> > > <div tool>All</div> > > <div class="content">Content goes here...</div> > </core-scaffold> > </template> > > <script> > Polymer('all-page', { > }); > </script> > </polymer-element> > > 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/f1e6f5f0-2cf1-4d62-b5ba-8670bc20cb59%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
