Невозможно отобразить все детали Утюг-лист из полимера

Question

Я впервые попробовал Полимер.

У меня есть следующий 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 для высоты железного списка.

У меня есть простой утюг-аякс, чтобы заполнить список. 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 в списке определяется документом. Кроме того, в списке есть опция flexbox на css.

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

Фактический результат

Когда я загрузить страницу, только 27 записи оказываются, хотя высота список размера соответственно с остальными элементами, которые не появляются.

Я попытался добавить кнопку и назовем это: это. $. List.fire ('iron-resize'); Но это не сработало. Изменение размера окна вручную также не делает ничего.

Единственное, что сработало, удалял этот атрибут из железа списка: свитка-мишень = «документ»

Но если я удалю его, есть полоса прокрутки, показывающая для железа списка, и полоса прокрутки для документа ...

Как я могу это решить? Я хочу только одну полосу прокрутки (документ) и элементы, которые всегда отображаются ...

Answer 1

Мне удалось исправить это. Выкапывать код, я нашел это свойство:

имеет скроллинг-область

... на приложение-заголовок-макет, который был обволакивающей все железо-страницы. Я удалил его, и теперь все работает так, как ожидалось, рендеринг элементов при прокрутке и только одна полоса прокрутки (в документе владельца).