翻译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>
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.