初めてPolymerを試しています。Polymer iron-listの全アイテムを表示できません
私は、インデックスファイルに次のCSSを持っている：
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
height: 100vh;
background-color: #eeeeee;
}
あなたは高さが明示的なサイズであることがわかります。
:host {
padding: 10px;
display: flex;
flex-direction: column;
height: 100vh;
@apply(--paper-font-common-base);
}
iron-list {
flex: 1 1 auto;
--iron-list-items-container: {
max-width: 800px;
margin: auto;
margin-top: 5px;
margin-bottom: 60px;
border-bottom: 1px solid #ddd;
};
}
あなたはまた、私は鉄 - リストの高さのためのフレキシボックスを使用しようとしていることがわかります。
その後、私は鉄 - リストで問題を抱えているページのCSSがあります。
私は単純なアイアン・アヤックスを使ってリストを作成しています。 Theres 81はJSONファイルに記録します。
<iron-ajax id="getVehiclesAjax"
url="../data/vehicles.json"
handle-as="json"
auto
on-response="handleVehiclesResponse"
on-error="handleVehiclesError"></iron-ajax>
リストも非常に簡単です：
<iron-list id="list" scroll-target="document" items="[[vehicles]]" as="item" selection-enabled>
<template>
<div>
<div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]">
<div class="pad">
<div class="primary-text">[[item.modelo]]</div>
<div class="shortText">[[item.placa]]</div>
<div class="longText">[[item.chassi]]</div>
</div>
</div>
</div>
</template>
</iron-list>
期待される成果
鉄のリストは、すべての項目をレンダリングする必要があり、すべての後に、サイズが明示的に親コンポーネントにサイズ設定されており、リストのスクロールターゲットはドキュメントに定義されます。また、リストにはCSS上のflexbox設定があります。
https://elements.polymer-project.org/elements/iron-list
実際の結果
私はページをロードすると、リストの高さが表示されない要素の残りの部分とそれに応じてサイズ設定されているが、唯一の27のレコードは、レンダリングされます。
ボタンを追加して、これを呼び出しようとしました：this。$ list.fire（ 'iron-resize'）; しかし、うまくいかなかった。手動でウィンドウのサイズを変更することも何もしません。
働いていた唯一の事、鉄 - リストからこの属性を削除しました： スクロール-ターゲットを=「文書」
しかし、私はそれを削除した場合、そこに鉄 - リストのために示すスクロールバーだ、とドキュメントのスクロールバー...
どうすればこの問題を解決できますか？スクロールバー（ドキュメント）とアイテムを常にレンダリングするだけです。
アイアンリストに高さを設定しないでください。高さを設定しないと、1スクロールバー - ドキュメントで必要なすべてのアイテムがレンダリングされます。あなたが何をしようとしているのか分からないからです。多分あなたは思っています。 –
私はこの問題を解決することができました。下記の私の答えを見てください。 – haase