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/78df841b-0ec6-455e-a6ae-2eb09c100fcb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
