Iron list inside custom item with polymer starter kit
I am using the Polymer Starter Kit as a base for my application. So, this is a single page application with routing to a specific section. My index is mostly unchanged, you can see it here https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html .
Now I have my custom element
<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 suitable class to my iron list, I see my list fill up. The only problem is my list will show up under my main app title (and that makes sense because of the matching layout specified in my list).
Also, the list works fine with the title if I put it in one html file, as you can see in the official demo pages of the official list.
Now I want to store my list in an external dom module, but I need it to work with other page elements in a single page kit page for polymer starter application.
EDIT: this is my layout.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 one dom-module
. The list cannot interact with the height of the heading and does not scroll with it without issue.
source to share
In earlier versions of polymer, you had to bind your scrollTarget list to the title bar scroller. There is a slide about this in Polymer 0.5 video @ 11: 58. In this case, the updated code in Polymer 1.0 might look something like this:
<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 I might now help point you in the right direction.
source to share