無法顯示聚合物鐵鏈表的所有項目

我對索引文件下面的CSS：

body { 
     margin: 0; 
     font-family: 'Roboto', 'Noto', sans-serif; 
     line-height: 1.5; 
     height: 100vh; 
     background-color: #eeeeee; 
     }

你可以看到，高度爲顯式指定大小。

然後，是我在與鐵清單問題的頁面的CSS：

: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;      
     }; 
    }

你也可以看到，我試圖用Flexbox的爲鐵列表的高度。

我有一個簡單的iron-ajax來填充列表。 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>

預期成果

鐵名單應該呈現的所有項目，畢竟，大小顯式指定大小的父組件，並列表上的scrolltarget被定義爲文檔。此外，該列表在CSS上具有flexbox設置。

https://elements.polymer-project.org/elements/iron-list

實際結果

當我加載頁面，只有27條記錄呈現，雖然名單高度大小相應地與那些沒有出現在元素的其餘部分。

我試着添加一個按鈕並調用它：this。$。list.fire（'iron-resize'）; 但它沒有奏效。手動調整窗口大小也不會執行任何操作。

只是工作的事，是去除鐵名單這個屬性：滾動目標=「文件」

但如果我刪除了，還有，顯示的是鐵列表滾動條，和滾動條...

我該如何解決這個問題？我只想要一個滾動條（文檔）和項目總是呈現...

來源

2017-02-16 haase

不要將高度設置爲iron-list呢？如果你沒有設置高度，它會渲染所有項目，如1個滾動條 - 文檔。因爲我沒有真正明白你在做什麼。也許你正在過度思考。 –

我設法解決了這個問題，請參閱下面的答案。 – haase

我設法解決它。挖的代碼，我發現這個屬性：

已滾動區域

...上封裝了所有鐵的網頁應用程序的頭佈局。我刪除它，現在一切都按預期工作，我滾動時渲染項目，並且只有一個滾動條（在所有者文檔上）。

來源

2017-02-17 19:51:25 haase

無法顯示聚合物鐵鏈表的所有項目

回答

相關問題