Good morning and thank you! It's problem solved, again! I wil read the docs you suggested, and I guess I have to read the copy of "JavaScript: The Missing Manual" that's waiting on my desk here...
Lex Am Montag, 8. September 2014 10:00:56 UTC+2 schrieb Atomiko Lex: > > Hi there, hoping for help again! > > I am trying to set up a responsive side nave like in the docs > <http://www.polymer-project.org/docs/elements/layout-elements.html#responsive-side-nav>, > > but somehow it works only in Firefox, not in Chrome, meaning nothing > happens in Chrome when I click the "menu" icon that is set up to reveal the > drawer panel, it does so in Firefox, however. > My "menu" icon is added as an attribute of a paper-icon-button nested > inside a core-toolbar, a core-scroll-header-panel and a section, which has > the "main" attribute. > > This is my code. > > <polymer-element name="my-element"> > <template> > <style>...</style> > <core-drawer-panel transition id="core_drawer_panel" touch-action> > <section id="section" drawer> > <core-header-panel mode="standard" id="core_header_panel"> > <core-toolbar id="core_toolbar"> > > <div id="div">Menu</div> > </core-toolbar> > <section id="section2"> > <core-menu selected="0" selectedindex="0" id="core_menu"> > <core-submenu id="core_submenu" icon="account-balance" > label="Listings"> > <core-item id="core_item" label="Item" horizontal center > layout></core-item> > <core-item id="core_item1" label="Item 1" horizontal > center layout></core-item> > <core-item id="core_item2" label="Item 2" horizontal > center layout></core-item> > <core-item id="core_item3" label="Item 3" horizontal > center layout></core-item> > </core-submenu> > <core-item id="core_item4" icon="flag" label="Current" > horizontal center layout></core-item> > <core-item id="core_item5" icon="link" label="Links" > horizontal center layout></core-item> > <core-item id="core_item6" icon="drive-zip" > label="Cooperation" horizontal center layout></core-item> > </core-menu> > </section> > </core-header-panel> > </section> > <section id="section1" main> > <core-scroll-header-panel headermargin="128" condenses > keepcondensedheader headerheight="192" id="core_scroll_header_panel"> > <core-toolbar id="core_toolbar1" class="tall"> > <paper-icon-button id="navicon" > icon="menu"></paper-icon-button> > <div id="div1" flex></div> > <core-icon-button icon="search" > id="core_icon_button2"></core-icon-button> > <core-icon-button icon="more-vert" > id="core_icon_button3"></core-icon-button> > <div id="div2" class="bottom indent title">Title</div> > </core-toolbar> > </core-scroll-header-panel> > </section> > </core-drawer-panel> > > <script> > document.addEventListener('polymer-ready', function() { > var navicon = document.getElementById('navicon'); > var drawerPanel = document.getElementById('core_drawer_panel'); > navicon.addEventListener('click', function() { > drawerPanel.togglePanel(); > }); > }); > </script> > </template> > > Is this is my style: > <style shim-shadowdom> > :host { > position: absolute; > width: 100%; > height: 100%; > box-sizing: border-box; > } > html,body { > height: 100%; > margin: 0; > background-color:#E5E5E5; > font-family: 'RobotoDraft', sans-serif; > } > #core_drawer_panel { > position: absolute; > top: 0px; > right: 0px; > bottom: 0px; > left: 0px; > width: 100%; > height: 100%; > } > #section { > position: absolute; > top: 0px; > left: 0px; > width: 100%; > height: 100%; > background-color: white; > } > #section1 { > height: 100%; > box-sizing: border-box; > background-color: white; > } > #core_header_panel { > width: 100%; > height: 100%; > position: absolute; > top: 0px; > left: 0px; > } > #core_toolbar { > color: white; > background: linear-gradient(rgb(86, 119, 252), rgb(42, 54, 177)); > } > #core_toolbar1 { > color: white; > box-shadow: rgb(158, 158, 158) 0px 3px 6px; > background-color: transparent; > } > core-toolbar.tall { > height: 235px; > } > #section2 { > height: 400px; > background-color: white; > } > #core_scroll_header_panel { > width: 100%; > height: 100%; > position: absolute; > top: 0px; > left: 0px; > } > core-scroll-header-panel::shadow #headerBg { > background-image: url( > http://rechtsanwalt-jmueller.de/user_gfx/RAM-DYN-PIC-DEFAULT.jpg); > } > core-scroll-header-panel::shadow #condensedHeaderBg { > background: linear-gradient(rgb(86, 119, 252), rgb(42, 54, 177)); > } > .content { > padding: 10px 30px; > } > .title { > -webkit-transform-origin: 0px 50%; > transform-origin: 0px 50% 0px; > font-size: 28px; > } > #div3 { > width: 300px; > height: 400px; > } > core-icon-button { > color: rgb(42, 54, 177); > } > paper-icon-button { > color: rgb(42, 54, 177); > } > core-item::shadow core-icon { > color: rgb(86, 119, 252); > } > core-submenu::shadow core-icon { > color: rgb(42, 54, 177); > } > core-menu { > color: rgb(42, 54, 177); > } > </style> > > I must have been missing something, but don't know what... > > Lex > 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/123d4332-7cad-4068-822b-4c7769012d59%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
