Polymer paper-dropdown-menu not rendered correctly in browser - html

I am having an issue with the rendered html for a simple paper-dropdown-menu. The list items do not appear as a styled "menu", but rather just a list of items appearing on the page.
Clicking the rendered paper-input component (part of the rendered dropdown) does animate the ripple, but does not animate the show/hide of the menu and menu items. Clicking an item in the list causes the list to disappear, but clicking the dropdown again does not make the list re-appear.
After examining the rendered html and comparing it with the same rendered demo html, I found that the paper-listbox and contained paper-items are rendered well outside of the iron-dropdown element where they should be. This causes all the non-functionality. By using the inspector and grabbing the paper-listbox html and moving it inside of the iron-dropdown fixes everything and the dropdown functions as expected.
What is causing the listbox to be rendered out of place?
Here is what the HTML that WORKS for a paper-dropdown-menu should look like:
...
<iron-dropdown id="dropdown" class="style-scope paper-menu-button" aria-disabled="false" horizontal-align="right" vertical-align="top" style="outline: none; z-index: 103; margin-bottom: 8px; margin-top: 8px; position: fixed; left: 137.938px; top: 317px;">
<div id="contentWrapper" class="style-scope iron-dropdown">
<div class="dropdown-content style-scope paper-menu-button" style="transform-origin: 0px 0px 0px; box-sizing: border-box; max-width: 104.063px; max-height: 218px;">
<paper-listbox role="listbox" tabindex="0" class="dropdown-content x-scope paper-listbox-0 x-scope paper-listbox-0" aria-expanded="true">
<paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0 x-scope paper-item-0">CRV-6</paper-item>
<paper-item role="option" tabindex="-1" aria-disabled="false" class="x-scope paper-item-0 x-scope paper-item-0">M3 Turbo</paper-item>
<paper-item role="option" tabindex="-1" aria-disabled="false" class="x-scope paper-item-0 x-scope paper-item-0">919 Turbo</paper-item>
<paper-item role="option" tabindex="-1" aria-disabled="false" class="x-scope paper-item-0 x-scope paper-item-0">300</paper-item>
</paper-listbox>
</div>
</div>
</iron-dropdown>
</paper-menu-button>
</paper-dropdown-menu></div>
Working dropdown menu
But instead I see the following that DOES NOT WORK:
...
<iron-dropdown id="dropdown" class="style-scope paper-menu-button" aria-disabled="false" aria-hidden="true" horizontal-align="right" vertical-align="top" style="outline: none; display: none;">
<div id="contentWrapper" class="style-scope iron-dropdown">
<div class="dropdown-content style-scope paper-menu-button">
</div>
</div>
</iron-dropdown>
</paper-menu-button>
<paper-listbox role="listbox" tabindex="0" class="dropdown-content x-scope paper-listbox-0">
<paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">CRV-6</paper-item>
<paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">M3 Turbo</paper-item>
<paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">919 Turbo</paper-item>
<paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">300</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
Not working dropdown. Shows as list of items
Manually pushing the paper-listbox element and children into the div.dropdowncontent makes the control work perfectly. Also interesting, is making some seemingly non-descript white-space changes (in the inspector) causes a re-render of the section and either the whole paper-dropdown-menu element and children are removed, or the paper-listbox gets re-rendered in the correct place and the control works.
Any idea what could be driving the listbox element out of place?
Here is the source page.component.html that renders the dropdown
<div class="row">
<div class="col col-xs-12">
<paper-dropdown-menu label="Vehicle Model">
<paper-listbox class="dropdown-content">
<paper-item>CRV-6</paper-item>
<paper-item>M3 Turbo</paper-item>
<paper-item>919 Turbo</paper-item>
<paper-item>300</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
</div>
And the index.html with the references:
<!DOCTYPE html>
<html>
<head>
<title>Permit Management</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.min.js"></script>
<script src="node_modules/moment/moment.js"></script>
<script src="node_modules/moment-timezone/builds/moment-timezone-with-data.min.js"></script>
<script src="lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
<link rel="import" href="lib/paper-button/paper-button.html" />
<link rel="import" href="lib/paper-input/paper-input.html" />
<link rel="import" href="lib/paper-item/paper-item.html" />
<link rel="import" href="lib/paper-menu/paper-menu.html" />
<link rel="import" href="lib/paper-menu-button/paper-menu-button.html" />
<link rel="import" href="lib/paper-dropdown-menu/paper-dropdown-menu.html" />
<link rel="import" href="lib/paper-listbox/paper-listbox.html" />
<link rel="import" href="lib/paper-checkbox/paper-checkbox.html" />
<link rel="import" href="lib/paper-toggle-button/paper-toggle-button.html" />
<link rel="import" href="lib/paper-progress/paper-progress.html" />
<link rel="import" href="lib/paper-spinner/paper-spinner-lite.html" />
<link rel="import" href="lib/gold-phone-input/gold-phone-input.html" />
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
<style is="custom-style">
#permitOwner {
--paper-input-container-input: {
font-size: 30px;
padding-left: 20px;
cursor: pointer;
};
}
#permitHolder {
--paper-input-container-input: {
padding-left: 20px;
cursor: pointer;
};
}
.plate-entry {
--paper-input-container-input: {
text-transform: uppercase;
};
}
</style>
<base href="/" />
</head>
<!-- 3. Display the application -->
<body>
<permit-manager-app>Loading...</permit-manager-app>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css">
</script>
</body>
</html>
bower.js package versions:
{
"name": "ASP.NET",
"private": true,
"dependencies": {
"polymer": "^1.5.0",
"webcomponentsjs": "^0.7.21",
"paper-button": "^1.0.11",
"paper-input": "^1.1.10",
"paper-progress": "^1.0.9",
"paper-dropdown-menu": "^1.2.1",
"paper-menu": "^1.2.2",
"paper-item": "^1.2.1",
"paper-listbox": "^1.1.2",
"paper-checkbox": "^1.2.0",
"paper-toggle-button": "^1.1.2",
"gold-phone-input": "^1.0.9",
"tether": "^1.3.2",
"tether-tooltip": "^1.2.0",
"requirejs": "^2.2.0",
"paper-spinner": "^1.1.1",
"web-animations-js": "^2.2.1"
},
"resolutions": {
"polymer": "^1.1.0"
}
ADDITIONAL INFO:
The paper-dropdown-menu renders and functions fine from the index.html. However does not from within a component and router-outlet.

This is due to how Polymer works with Shadow DOM. Even though some browsers support Shadow DOM natively, by default Polymer works in the “Shady DOM” mode. It doesn’t use Shadow DOM, but places the elements’s local DOM in a regular DOM tree, while applying scoping for the styles.
Unfortunately, this requires developers to always use Polymer.dom accessors to manipulate the DOM contents of Polymer elements. Angular 2 doesn’t know about that. In Angular 2 applications, component HTML templates are first compiled to JavaScript and then placed in DOM using regular browser DOM APIs.
To resolve this, you can try using Vaadin Angular2-Polymer package. It patches Angular 2 DomAdapter to use Polymer accessor functions for DOM manipulations. This keeps Polymer’s in-memory logical DOM tree in the right state and thus fixes the issue. I would recommend this way, the package also solves some other compatibility issues, such as: two-way data binding, styling and ngForm support.
Alternatively, you can switch Polymer to Shadow DOM mode by adding a line <script>window.Polymer = { dom: 'shadow' };</script> just after the webcomponentsjs script in the section. On the downside, in this mode it is required to have a support for Shadow DOM in browsers, either natively or with a full webcomponents.js polyfill, which has a performance impact.

Related

Polymer paper-dialog exit animation not working

I just started learning Polymer and I'm trying to put entry and exit animation on a paper dialog. It seems like the entry animation works perfectly, but the exit animation is not. I'm do a workaround by manually coding a jQuery, but I would like to use the built in capability of paper dialog.
Thanks.
<paper-dialog id="dialog" entry-animation="slide-from-top-animation" exit-animation="fade-out-animation" class="dialogstyle" no-cancel-on-outside-click no-cancel-on-esc-key>
<div class="buttons">
<paper-button id="closebutton" dialog-dismiss autofocus><i class="fa fa-times" aria-hidden="true"></i></paper-button>
</div>
<strong>content here</strong>
</paper-dialog>
The exit animation should work as long as you remember to include the fade-out-animation.html.
<head>
<base href="https://polygit.org/polymer+1.11.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-dialog/paper-dialog.html">
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="neon-animation/animations/slide-from-top-animation.html">
<link rel="import" href="neon-animation/animations/fade-out-animation.html">
</head>
<body>
<paper-dialog entry-animation="slide-from-top-animation"
exit-animation="fade-out-animation" opened>
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
</body>
codepen

Polymer Paper-Menu HTML not rendered correctly in browser

I have a very basic attempt at implementing paper-menu. However the rendered HTML is not right and breaks the interaction. When clicking a menu item, the entire list disappears. I've identified it's because the paper-item elements are not rendered inside a very key div inside the paper-menu element.
My component.html looks like this:
<div>
<paper-menu selected="0">
<paper-item>Location 1</paper-item>
<paper-item>Location 2</paper-item>
</paper-menu>
</div>
However, what gets rendered is like this:
<div>
<paper-menu role="menu" tabindex="0" selected="0" class="x-scope paper-menu-0">
<div class="selectable-content style-scope paper-menu">
</div>
<paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">Location 1</paper-item>
<paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">Location 2</paper-item>
</paper-menu>
</div>
If I manipulate the rendered HTML in the browser so the close div tag properly wraps the paper-item elements, the interaction works.
What am I doing wrong?
In my index.html I have:
<script src="lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="lib/paper-button/paper-button.html" />
<link rel="import" href="lib/paper-input/paper-input.html" />
<link rel="import" href="lib/paper-item/paper-item.html" />
<link rel="import" href="lib/paper-menu/paper-menu.html" />
<link rel="import" href="lib/paper-listbox/paper-listbox.html" />
<link rel="import" href="lib/paper-toggle-button/paper-toggle-button.html" />
<link rel="import" href="lib/paper-progress/paper-progress.html" />
<link rel="import" href="lib/paper-dropdown-menu/paper-dropdown-menu.html" />
And in my bower.json I am referencing the following versions
{
"name": "permit-manager-app",
"private": true,
"dependencies": {
"polymer": "^1.4.0",
"webcomponentsjs": "^0.7.22",
"paper-button": "^1.0.11",
"paper-input": "^1.1.10",
"paper-progress": "^1.0.9",
"paper-dropdown-menu": "1.2.1",
"paper-menu": "1.2.2",
"paper-item": "1.2.1",
"paper-listbox": "1.1.2",
"paper-toggle-button": "^1.1.2"
}
}
And this is Angular2 beta 17
I've come across a similar issue within the same project with the paper-dropdown-menu where a critical section is rendered out of place and the control does not function.
details are here:
Polymer paper-dropdown-menu not rendered correctly in browser

Polymer using webcomponents.js instead of webcomponents-lite.js breaks app

Hi I am trying to vulcanize my app but using webcomponents-lite.js doesnt seem to polyfill correctly and reading up I found a suggestion that says to use webcomponents.js, problem there is when I use that i get these errors:
Unable to get property 'mousedown' of undefined or null reference
Unable to get property 'click' of undefined or null reference
and thats if I vulcanize or not. Must say I am having more issues using Polymer than I think I should. Works no problem with Chrome but other browsers fight me at every turn.
here is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/elements.html">
<link rel="import" href="css/main.html">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body class="fullbleed">
<template id="app" is="dom-bind">
<paper-drawer-panel>
<paper-header-panel main>
<paper-toolbar>
<div>Toolbar</div>
<paper-icon-button icon="menu" paper-drawer-toggle>
</paper-icon-button>
<span class="flex"></span>
<paper-button onclick="_logout()">
<div>Log out</div>
</paper-button>
</paper-toolbar>
<neon-animated-pages class="flex" selected="{{selected}}">
<view-profile></view-profile>
<add-skill></add-skill>
<search-skill></search-skill>
<view-users></view-users>
</neon-animated-pages>
</paper-header-panel>
<paper-header-panel drawer>
<paper-toolbar>
</paper-toolbar>
<paper-menu class="list" selected="{{selected}}">
<paper-item>
<iron-icon icon="account-circle"></iron-icon>
<span>Profile</span>
</paper-item>
<paper-item>
<iron-icon icon="add" on-click="showAddSkill"></iron-icon>
<span>Add Skills</span>
</paper-item>
<paper-item>
<iron-icon icon="search"></iron-icon>
<span>Search</span>
</paper-item>
<paper-item>
<iron-icon icon="android"></iron-icon>
<span>Users</span>
</paper-item>
</paper-menu>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script src="scripts/app.js"></script>
</body>
</html>
this is my elements.html:
<!-- Iron -->
<link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-input/iron-input.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<!-- Neon -->
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animatable-behavior.html">
<link rel="import" href="../bower_components/neon-animation/animations/slide-from-right-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/slide-left-animation.html">
<!-- Routing -->
<link rel="import" href="routing.html">
and this is the custom element that throws the error:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../elements/elements.html">
<dom-module id="add-skill">
<style>
paper-dropdown-menu{
width: 20%;
--paper-input-container-label:{
color: red;
};
--paper-input-container-focus-color: red;
}
paper-input{
--paper-input-container-label:{
color: red;
};
--paper-input-container-label-focus:{
color: red;
};
--paper-input-container-underline:{
color: red;
};
--paper-input-container-focus-color: red;
}
form{
margin: 0px 0px 0px 100px;
}
paper-input{
width: 100px;
}
paper-button{
color: red;
}
paper-menu-button{
width: 100%;
}
</style>
<template id="skillForm">
<paper-material elevation="1">
<form is="iron-form "id="formPost" method="POST" action="../../scripts/insertSkill.php" onSubmit="window.location='skills.integr8it.local'">
<paper-dropdown-menu id="vendorMenu" label="Vendor" selected-item-label="{{vendorSelected}}">
<paper-menu class="dropdown-content" id="vendorSelect" on-iron-select="itemSelected">
<template is="dom-repeat" items="{{vendorList}}">
<paper-item id="vendorName" value="[[item]]">[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input id="selectedVendorName" name="selectedVendorName" value="[[vendorSelected]]" type="hidden">[[vendorSelected]]</input>
<br />
<paper-dropdown-menu id="certificationMenu" label="Certification" selected-item-label="{{certificationSelected}}">
<paper-menu class="dropdown-content" id="certificationSelect">
<template is="dom-repeat" items="{{certificationList}}">
<paper-item id="certificationName" value="item">[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input name="selectedCertificationName" value="[[certificationSelected]]" type="hidden"></input>
<br />
<paper-dropdown-menu id="classMenu" label="Class" selected-item-label="{{classSelected}}">
<paper-menu class="dropdown-content" id="classSelect">
<template is="dom-repeat" items="{{classesList}}">
<paper-item id="className" value="{{item}}">[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input id="selectedClassName" name="selectedClassName" value="[[classSelected]]" type="hidden">[[classSelected]]</input>
<br />
<paper-input name="year" label="Year" type="number" maxlength="4" max="2000" min="1990" auto-Validate required error-message="Year must be entered" value="{{year}}}">
{{year}}
</paper-input>
<br />
<paper-button class="primary" id="submitButton" raised onclick="clickHandler(event)" disabled>Submit</paper-button>
<paper-item id="error"></paper-item>
</form>
</paper-material>
<iron-ajax
id="vendorSubmit"
method="POST"
url="../../scripts/addskill.php"
handle-as="json"
on-response="handleVendorResponse"
debounce-duration="300">
</iron-ajax>
<iron-ajax
id="certificationSubmit"
method="POST"
url="../../scripts/getCertification.php"
handle-as="json"
on-response="handleCertificationResponse"
debounce-duration="300">
</iron-ajax>
<iron-ajax
id="classSubmit"
method="POST"
url="../../scripts/getClass.php"
handle-as="json"
on-response="handleClassResponse"
debounce-duration="300">
</iron-ajax>
</template>
<script>
function clickHandler(event) {
Polymer.dom(event).localTarget.parentElement.submit();
}
Polymer({
is:'add-skill',
behaviors:[Polymer.NeonAnimatableBehavior],
properties:{
animationConfig:{
value:function(){
return{
'entry':{
name:'slide-from-right-animation',
node:this
},
'exit':{
name:'slide-left-animation',
node:this
}
};
}
}
},
ready:function(){
this.sendVendorRequest();
this.vendorList = [];
this.certificationList = [];
this.sendClassRequest();
this.classesList = [];
var cookie = document.cookie;
},
sendVendorRequest:function(){
var datalist = 'vendor='+encodeURIComponent('1');
this.$.vendorSubmit.body = datalist;
this.$.vendorSubmit.generateRequest();
},
handleVendorResponse:function(request){
var response = request.detail.response;
for(var i = 0; i < response.length;i++){
this.push('vendorList', response[i].name);
}
},
submitForm:function(event){
Polymer.dom(event).localTarget.parentElement.submit();
},
sendCertificationRequest:function(vendor){
var datalist = 'vendorName='+encodeURIComponent(vendor);
this.$.certificationSubmit.body = datalist;
this.$.certificationSubmit.generateRequest();
},
handleCertificationResponse:function(request){
this.splice('certificationList', 0, this.certificationList.length);
var response = request.detail.response;
for(var i = 0; i < response.length;i++){
this.push('certificationList', response[i].name);
}
},
sendClassRequest:function(className){
var datalist = 'class='+encodeURIComponent('1');
this.$.classSubmit.body = datalist;
this.$.classSubmit.generateRequest();
},
handleClassResponse:function(request){
var response = request.detail.response;
for(var i = 0; i < response.length; i++){
this.push('classesList', response[i].name);
}
},
itemSelected : function(e) {
var selectedItem = e.target.selectedItem;
if (selectedItem) {
this.sendCertificationRequest(selectedItem.innerText);
console.log("selected: " + selectedItem.innerText);
}
this.validate();
},
listeners:{
'iron-form-submit': '_redirect',
'iron-form-response': '_redirect'
},
validate:function(){
var selectedVendor = document.getElementById('selectedVendorName');
if(selectedVendor.text !== null){
this.$.submitButton.disabled = false;
}
},
showIndex:function(){
this.$.skillForm.render();
this.fire('_showIndex');
},
});
</script>
</dom-module>
the app loads slowly which makes sense as I am importing alot so the vulcanize was suggested to sort that out. And I get a random hierarchy message on IE. if I reload the page a few time it foes away. Again vulcanize was suggested to fix that as well
The issue is caused by the ShadowDOM polyfill.
If webcomponents-lite.js, which doesn't have ShadowDOM, is used instead of webcomponents.js then all will work correctly.
Since 0.8-preview polymer only depends on webcomponents-lite.js, so you can use this instead of webcomponents.js without any problem: ShadowDom polyfill will definitely be unnecessary since polymer 0.8-preview
Personally, I have not needed to use the Shadow DOM so far...
Example of Shadow DOM:
<dom-module id="my-webcomponent">
<style>
...
</style>
<!-- //////////// Content of <template> will be appended to the <my-webcomponent> tag (works perfectly with webcomponents-lite.js) -->
<template>
<h1>Shadow Root!</h1>
</template>
<!-- //////////// This is Shadow DOM (doesn't work with webcomponents-lite.js) -->
<div id="outsideTemplate">
<h1>Shadow DOM!</h1>
</div>
<script>
Polymer({
is: "my-webcomponent",
...
...
...
});
</script>
</dom-module>
More information:
https://github.com/webcomponents/webcomponentsjs/issues/75
https://github.com/webcomponents/webcomponentsjs/issues/89
If you still want to use webcomponents.js and have problems with JQuery, perhaps (I have not tried it) there are one "solution":
You could wrap all your JQuery stuff inside this IIFE:
(function(document) {
// JQuery code here
})(wrap(document));
NOTE:
Firefox team are (still) working on it: https://hacks.mozilla.org/2014/12/mozilla-and-web-components/

Polymer 1.0: Using template dom-repeat inside paper-menu elements to display iron-pages on selection

Using Polymer 1.0, I have created a paper-drawer-panel layout. In the drawer I have a menu using paper-menu with paper-items which are bound to the iron-pages. I took this example from Content Switcheroo with Core-Pages -- Polycasts #09 and converted it to use the Polymer 1.0 elements. In the code below you can see my commented section in which the paper-items are hard-coded. This works fine.
My next step was to try and build my menu dynamically by using the <template is="dom-repeat"> element to iterate over an arbitrary array of menu items. The menu is rendered correctly (I can see all the menu items that are bound to the array), but I cannot click on the items and no iron-pages are displayed. It seems that the data-category attribute which is used for attr-for-selected is not working inside <template is="dom-repeat">.
In what ways can I get this to work?
Edit: Removing the attr-for-selected attributes and switching the iron-pages using the index work, but relying on the index of the array is not an option in my situation.
My index.html is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<style>
</style>
</head>
<body>
<my-app></my-app>
<dom-module id="my-app">
<style>
</style>
<template>
<paper-drawer-panel>
<paper-header-panel drawer class="fit">
<paper-toolbar>
<div>Drawer</div>
</paper-toolbar>
<paper-menu class="content fit" selected="{{page}}" attr-for-selected="data-category">
<!-- This works -->
<!--
<paper-item data-category="item1" label="item1">
<span>John Smith</span>
</paper-item>
<paper-item data-category="item2" label="item2">
<span>Jane Doe</span>
</paper-item>
-->
<!-- This does not work -->
<template is="dom-repeat" items="{{names}}">
<paper-item data-category="{{item.itemNum}}" label="{{item.itemNum}}">
<span>{{item.first}}</span><span>{{item.last}}</span><span>{{item.itemNum}}</span>
</paper-item>
</template>
</paper-menu>
</paper-header-panel>
<paper-header-panel main class="fit">
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div class="flex">Main Content</div>
</paper-toolbar>
<iron-pages selected="{{page}}" attr-for-selected="data-category">
<section data-category="item1">
<h1>Item 1</h1>
<div>Item 1 content...</div>
</section>
<section data-category="item2">
<h1>Item 2</h1>
<div>Item 2 content...</div>
</section>
</iron-pages>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "my-app",
ready: function() {
this.names = [{itemNum: "item1", first: "John", last: "Smith"}, {itemNum: "item2", first: "Jane", last: "Doe"}];
}
});
</script>
</dom-module>
</body>
</html>
Try <paper-item data-category$="{{item.itemNum}}" label$="{{item.itemNum}}">, from the docs, that will call paper-item.setAttribute('data-category', itemNum) instead of paper-item.data-category = itemNum.
https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding

polymer absolute image position

I'm trying to learn Google Polymer, but I seem to fail at really simple things...
I currently have a drawer and a main page with a title bar as follows:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<!-- 1. Load platform.js for polyfill support. -->
<script src="bower_components/platform/platform.js"></script>
<!-- 2. Use an HTML Import to bring in the element. -->
<link rel="import"
href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-icon-button/core-icon-button.html">
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="big-picture.html">
<link rel="stylesheet" type="text/css" href="style/main.css">
</head>
<body unresolved touch-action="auto">
<core-drawer-panel>
<div drawer id="drawer">
<core-menu id="drawermenu">
<paper-item class="menulink">Home</paper-item>
<paper-item class="menulink">Gallery</paper-item>
<paper-item class="menulink">Calendar</paper-item>
<paper-item class="menulink">Contact</paper-item>
</core-menu>
</div>
<div main>
<core-header-panel mode="seamed">
<core-toolbar>
<core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button>
<h1 id="title">Test</h1>
</core-toolbar>
<div id="pagecontent">
<big-picture></big-picture>
</div>
</core-header-panel>
</div>
</core-drawer-panel>
</body>
</html>
I'm trying to create a picture element that will be shown directly beneath the title bar,
I want the picture to fill up the remaining screen space but also have a certain height. Later I want these pictures to change automatically. None of my styling seems to work though, my picture element looks like this:
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="big-picture">
<template>
<style>
:host
{
height: 100px;
}
#crop
{
position: relative;
}
#mainpictop
{
position: absolute;
}
#mainpicbottom
{
position: absolute;
}
</style>
<div id="crop">
<img id="mainpictop" src="img/main/1.jpg"></img>
<img id="mainpicbottom" src="img/main/2.jpg"></img>
</div>
</template>
<script>
Polymer({});
</script>
</polymer-element>
A common problem is not setting up your page layout. Container elements generally need to be sized explicitly. I would suggest something like this:
<body fullbleed vertical layout unresolved touch-action="auto">
<core-drawer-panel flex>
fullbleed makes the body fit the viewport with no margin. vertical layout gives body flex-box layout ability. flex on the core-drawer-panel will cause it to fit to the body.
Additionally, all custom elements are display: inline by default (this is a DOM/CSS rule, not Polymer's). To set a size on an element, you need to make it block or inline-block.
:host
{
display: block;
height: 100px;
}