iron-list inside custom element with polymer starter kit

Question

I'm using Polymer Starter Kit as a base for an app. So, this is a single page app with routing to specific section. My index is basically unchanged, you can see it here https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html.

Now I have my custom element here

<dom-module id="lista-contatti">    
<template>

    <iron-ajax url="../../api/get_contacts.php" last-response="{{data}}" auto></iron-ajax>
    <iron-list items="{{data}}" as="item" id="list">
        <template>
            <paper-icon-item>
              <avatar class$="[[item.classe]]" item-icon></avatar>
              <paper-item-body two-line>
                <div><a href="{{computeLink(item.nome)}}"><span>[[item.nome]]</span> <span>[[item.cognome]]</span></a></div>
                <div secondary><span>[[item.tipo]]</span></div>
              </paper-item-body>
            </paper-icon-item>
        </template>

    </iron-list>

</template>

</dom-module>

This works because if I give a fit class to my iron-list I can see my list populating. The only problem is that my list will render under my main app header (and that makes sense because of the fit layout given to my list).

Also, the list works great with header if I put it on a single html file, as you can see in iron-list official demo pages.

Now I want to keep my list in an external dom-module, but I need it to work seamlessly with other elements of the page in the single page app scenario of the polymer starter kit.

EDIT: this is my index.html one page app layout

<body>
  <template is="dom-bind" id="app">
    <paper-drawer-panel>
      <paper-scroll-header-panel drawer fixed>
        <paper-toolbar> ... </paper-toolbar>
        <paper-menu> ... </paper-menu>
      </paper-scroll-header-panel>
      <paper-scroll-header-panel main condenses keep-condensed-header>
        <paper-toolbar> ... </paper-toolbar>
        <iron-pages attr-for-selected="data-route" selected="{{route}}">
          <section data-route="foo"> ... </section>
          <section data-route="contact">
            <!-- HERE IS MY DOM-MODULE -->
            <lista-contatti></lista-contatti>
          </section>
        </iron-pages>
      </paper-scroll-header-panel>
    </paper-drawer-panel>
  </template>
</body>

My iron-list does not work as expected with paper-scroll-header-panel because it is nested inside many elements like iron-pages, section and my custom dom-module. The list can't interact with the header height and doesn't scroll seamlessly with it.

Also can you clarify what the Q or problem is - is it purely a matter of layout, or is there something not working with the script when you make it a separate dom-module? — David Douglas
Hi, thank you for your interest, I edited my Q with the index layout and more explanation. Hope it is clearer now. — filipp8
Did you ever figure this out? I think I have the same problem — astromme

David Douglas David Douglas · Accepted Answer · 2015-08-20T19:14:49

In earlier versions of polymer you had to bind your list's scrollTarget to header panel's scroller. There is a slide about this in a Polymer 0.5 video @11:58. In which case the updated code in Polymer 1.0 might look something like:

<paper-scroll-header-panel id="hPanel" main condenses keep-condensed-header>
    <iron-list id="list" items="{{data}}" as="item" >
    ...
    </iron-list>
</paper-scroll-header-panel>

script:

document.querySelector("#list").scrollTarget = document.querySelector("#hPanel").scroller;

NB: I haven't tested this yet but figured it might help to point you in the right direction for now.

iron-list inside custom element with polymer starter kit

1 Answers