无法显示聚合物铁链表的所有项目

我对索引文件下面的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

无法显示聚合物铁链表的所有项目

回答

相关问题