Menu
I was writing a Polymer app when I realized my paper-dropdown-menu element was not working on updated Firefox but giving no problems in Chrome.
All bower components are correctly installed and accessible.There is no console errors on any of the browsers.
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.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="bower_components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
</head>
<body>
<style>
paper-dropdown-menu {
left: 24px;
width: 180px;
}
</style>
<paper-dropdown-menu label="Your favorite food">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item>Pasta</paper-item>
<paper-item>Pizza</paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<paper-button raised>CLICK ME</paper-button>
</body>
</html>
UPDATE: I tried downloading the paper-dropdown-menu demo and running it in localhost. Installed all components using bower but still don't work in Firefox. In Chrome runs fine.
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link href="bower_components/core-collapse/core-collapse.html" rel="import">
<link href="bower_components/core-menu/core-menu.html" rel="import">
<link href="bower_components/paper-dropdown/paper-dropdown.html" rel="import">
<link href="bower_components/paper-item/paper-item.html" rel="import">
<link href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
</head>
<body>
<template is="auto-binding">
<paper-dropdown-menu label="Your favorite pastry">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</template>
<script>
scope = document.querySelector('template[is=auto-binding]');
scope.pastries = [
'Apple fritter',
'Croissant',
'Donut'
];
</script>
</body>
</html>
936
For some reason it would not work on localhost port 8000 but works great on localhost port 80.
Just had to run the local server like this:
sudo python -m SimpleHTTPServer 80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With