Ich versuche Polymer zum ersten Mal.Nicht alle Artikel von Polymer Eisen-Liste
Ich habe folgende CSS auf der Index-Datei:
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
height: 100vh;
background-color: #eeeeee;
}
Sie können sehen, dass die Höhe explizit Größe ist.
Dann ist da noch die CSS der Seite, die ich Probleme mit Eisen-Liste habe:
: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;
};
}
Sie können auch sehen, dass ich versuche Flexbox für die Höhe der Eisenliste zu verwenden.
Ich habe eine einfache Eisen-Ajax, um die Liste zu füllen. Theres 81 Datensätze in der JSON-Datei.
<iron-ajax id="getVehiclesAjax"
url="../data/vehicles.json"
handle-as="json"
auto
on-response="handleVehiclesResponse"
on-error="handleVehiclesError"></iron-ajax>
Die Liste ist auch ziemlich einfach:
<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>
Erwartetes Ergebnis
Die Eisen-Liste alle Elemente machen sollte, schließlich wird die Größe so bemessen ist explizit auf die übergeordnete Komponente und Das Scrollziel in der Liste ist für das Dokument definiert. Außerdem hat die Liste die Flexbox-Einstellung auf der CSS.
https://elements.polymer-project.org/elements/iron-list
tatsächliches Ergebnis
Wenn ich die Seite zu laden, nur 27 Datensätze wiedergegeben werden, auch wenn die Liste Höhe entsprechend mit dem Rest der Elemente Größe ist, die nicht erscheinen.
Ich habe versucht, einen Knopf und rufen diese hinzuzufügen: das $ list.fire ('Eisen-Resize');.. Aber es hat nicht funktioniert. Eine manuelle Größenänderung des Fensters führt auch nicht zu etwas.
Das einzige, was funktionierte, wurde das Entfernen dieses Attribut aus der Eisen-Liste: Scroll-target = „document“
Aber wenn ich es entfernen, gibt es eine Scrollbar für die Eisen-Liste zeigt, und ein Bildlaufleiste für das Dokument ...
Wie kann ich das lösen? Ich möchte nur eine Bildlaufleiste (Dokument) und die Elemente immer gerendert werden ...
Höhe nicht auf Eisenliste dann einstellen? Wenn Sie keine Höhe einstellen, werden alle Objekte wie gewünscht mit 1 Bildlaufleiste - Dokument gerendert. weil ich nicht wirklich verstehe, was du versuchst. vielleicht überdenkst du. –
Ich habe es geschafft, das Problem zu lösen, siehe meine Antwort unten. – haase