3
シンプルなペーパードロップダウンメニューのレンダリングされたhtmlに問題があります。リスト項目はスタイルの付いた "メニュー"として表示されるのではなく、ページに表示される項目の一覧です。ポリマーペーパードロップダウンメニューがブラウザで正しく表示されない
レンダリングされた用紙入力コンポーネント（レンダリングされたドロップダウンの一部）をクリックすると、リップルがアニメーション化されますが、メニューおよびメニュー項目の表示/非表示はアニメーション化されません。リスト内の項目をクリックするとリストが消えますが、ドロップダウンを再度クリックしてもリストは再び表示されません。
レンダリングされたhtmlを調べ、それを同じレンダリングされたデモhtmlと比較した後、ペーパーリストボックスと含まれているペーパーアイテムは、それらがあるはずの鉄ドロップダウン要素の外側にレンダリングされることがわかりました。これにより、すべての非機能が発生します。インスペクタを使用して紙のリストボックスのHTMLを取得し、それをアイロンドロップダウン内で移動すると、すべての機能とドロップダウン機能が期待通りに修正されます。
リストボックスが外れてレンダリングされる原因は何ですか？ここで
は、紙のドロップダウン・メニューのために働くHTMLがどのように見えるかです：...
<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>
しかし、その代わりに、私は動作しません、以下を参照してください。
...
<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
手動でpaper-listbox要素とchildrenをdiv.dropdowncontentに追加すると、コントロールが完全に機能します。また興味深いことに、（インスペクタで）一見不可視の空白の変更を加えると、セクションの再レンダリングが発生し、paper-dropdown-menu要素と子要素全体が削除されるか、またはペーパーリストボックスが再表示されます。正しい場所にレンダリングされ、コントロールが機能します。
リストボックス要素を適切に動かすことができなかった考えはありますか？
<!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パッケージのバージョン：
{
"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"
}
<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>
とのindex.htmlをレンダリングソースpage.component.htmlです
追加情報：
paper-dropdown-menuはindex.htmlからレンダリングされて機能します。しかし、コンポーネントやルータのアウトレット内からのものではありません。
詳細な回答ありがとうございます。私はVaadin Elementsを見て、ペーパードロップダウンをVaadin-combo-boxに置き換えました。メニューオーバーレイがモーダルから正しく表示されるようにするには、CSSの操作を行うだけで済みましたが、すべてが機能します。 Vaadinの要素もすべて、余分なステップを必要とせずに双方向バインドで動作します。 – Jessel