I have been playing with polymer's core-scaffold element and I quite like it. However, for the particular app I'm developing, the core-scaffold cannot be the top level layout element for the entire app. I require a main application toolbar to always be displayed and an initial page that is not controlled by a scaffold layout. In other words, the scaffold-element is the main layout element, but only for one of the sub-pages/sub-elements of the application. In order to accomplish this, I'm trying to make the scaffold-controlled polymer element selectable via core-pages or core-animated-pages (starting with core-pages for simplicity sake, and then migrating to core-animated-pages once I understand how that works). The scaffold element loads without any difficulty when not inside core-pages. However, when used inside core-pages and it is selected, the main application toolbar is displayed but the scaffold element does not (no errors in Chrome console). In other words, an empty display under the main app toolbar. Can anyone shed some light on this? Is it some sort of styling problem perhaps?
Here is the high level app element code stripped down to the essentials to demonstrate the problem (imports not included):
<polymer-element name="my-app">
<template>
<style>
core-header-panel {
/* height: 100% fails here on some browsers */
height: 100vh; /* 100% of the viewport height */
}
core-toolbar {
background-color: #5264ae; /* Google Blue ; */
color: #fff; /* White */
font-weight: 700; /* Boldish font */
}
</style>
<!-- HIGH LEVEL APP LAYOUT ELEMENT -->
<core-header-panel id="appHeader" mode="standard">
<!-- OUTER APP TOOLBAR ELEMENT -->
<core-toolbar id="appToolbar">
<paper-icon-button id="navicon" icon="arrow-back"></paper-icon-button>
<span flex>App Name</span>
<paper-icon-button id="searchbutton" icon="search"></paper-icon-button>
</core-toolbar>
<!-- MAIN CONTENT ELEMENTS -->
<core-pages id="mainPages" selected="{{selectedPage}}">
<my-default-page-element name="firstPage" on-core-activate="{{pageSelect}}"></my-default-page-element>
<my-scaffold-element name="scaffoldPage"></my-scaffold-element>
</core-pages>
</core-header-panel>
</template>
<script>
Polymer('my-app', {
selectedPage: 'firstPage',
//selectedPage: 'scaffoldPage',
pageSelect: function () {
this.showPage();
},
showPage: function () {
//this.selectedPage = "scaffoldPage";
this.$.mainPages.selected = "scaffoldPage";
}
});
</script>
and here is the scaffold-element code stripped down to its essentials as well (also sans imports), just for sake of completeness:
<polymer-element name="my-scaffold-element">
<template>
<style shim-shadowdom>
core-toolbar {
background-color: #5264ae; /* Google Blue ; */
color: #fff; /* White */
}
core-scaffold::shadow core-toolbar {
background-color: #5264ae; /* Google Blue ; */
color: #fff; /* White */
}
core-scaffold::shadow core-header-panel {
background: #FFF; /* White */
color: black;
}
/* For use with the shim-shadowdom directive interpreted only when on a non-webcomponent/shadowdom native platform */
/* (i.e. I noticed the above styling wasn't being applied by FireFox */
core-scaffold #main core-header-panel {
background: #FFF; /* White */
color: black;
}
</style>
<core-scaffold id="contentscaffold">
<core-header-panel id="innerHeader" navigation flex>
<core-toolbar id="innerToolbar">
<span>Options</span>
</core-toolbar>
<core-menu>
<core-item label="Subpage1" on-tap=" {{ pageTapAction }}"></core-item>
<core-item label="Subpage2" on-tap="{{ pageTapAction }}"></core-item>
<core-item label="Subpage3" on-tap="{{ pageTapAction }}"></core-item>
<core-item label="Subpage4" on-tap="{{ pageTapAction }}"></core-item>
<core-item label="Subpage5" on-tap="{{ pageTapAction }}"></core-item>
</core-menu>
</core-header-panel>
<span id="sectionTitle" tool>Subpage1</span>
<core-pages id="pages" selected="0">
<section id="sectionPage1">
<my-subpage-one-element></my-subpage-one-element>
</section>
<section id="sectionPage2">
<div>Page 2 polymer element here</div>
</section>
<section id="sectionPage3">
<div>Page 3 polymer element here</div>
</section>
<section id="sectionPage4">
<div>Page 4 polymer element here</div>
</section>
<section id="sectionPage5">
<div>Page 5 polymer element here</div>
</section>
</core-pages>
</core-scaffold>
</template>
<script>
Polymer('my-scaffold-element', {
pageTapAction: function(e, detail, sender) {
for(var key in sender.parentNode.children) {
if (sender.parentNode.children[key].label == e.target.label) {
this.$.pages.selected = key;
this.$.sectionTitle.innerText = e.target.label;
}
}
}
});
</script>
Anybody else run into problems with using a scaffold element inside core-pages? Once again, just to re-iterate, the scaffold element loads perfectly fine on its own when loaded outside of core-pages.
UPDATED:
For the sake of completeness and to show all CSS styling involved in this scenario, here is the index page that imports the high level app element itself. Note the use of fullbleed:
<html>
<head>
<title>Application Title</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/my-app-components/my-app.html">
<style>
html, body {
height: 100%;
margin: 0;
}
body {
font-family: sans-serif;
}
</style>
</head>
<body fullbleed unresolved>
<template is="auto-binding">
<my-app></my-app>
</template>
</body>
</html>
