Reputation: 23

Polymer Iron list display is incorrect

<dom-module id="page-list">
<style include="shared-styles"></style>
<style>
 iron-list {
  height: 500px;      
}  
</style>
<template>
    <neon-animated-pages id="pages" selected="0">
        <neon-animatable><paper-button id="list-button" raised on-tap="_onOK" >List</paper-button></neon-animatable> 
        <neon-animatable>
          <iron-list id="list" items="[[data]]" as="item">
              <template>
                    <div>
                        Name: <span>[[item.name]]</span>
                    </div>
              </template>
          </iron-list>   
        </neon-animatable>
    </neon-animated-pages>                     
</template>
<script>
    Polymer({
        is: "page-list",
        attached: function () {
            this.data=[
                    {
                        index: 0,
                        name: "Liz Grimes"
                    },
                    {
                        index: 1,
                        name: "Frazier Lara"
                    },
                    {
                        index: 2,
                        name: "Dora Griffith"
                    }];
                    this.$.list.fire('resize');
        },
        behaviors: [
            Polymer.NeonAnimatableBehavior
        ],
        properties: {                
            data: {
                type: Array,
                notify: true
            }
        },
        _onOK: function (e) {
            this.$.pages.selected="1";
        }
    });
</script>

After pushing the "List" button, the iron list is expected to be totatlly displayed. Unfortunately, the result is a display of one line with "Name:" and nothing else. If I force the selected page to "1", <neon-animated-pages id="pages" selected="1"> which means that on the first resfresh of the browser, the page with the iron list is displayed, the display is correct : three lines with the correct data.

The issue seems to be related to the fact that on startup, the page with the iron list is not yet displayed.

Anybody knows how to solve this ?

Upvotes: 2

Answers (3)

Westbrook

Reputation: 608

The following solution is merely a hack, but if you listen to the iron-resize event on your neon-animatable and then call notifyResize() on any child iron-list elements you should be able to get around this issue until a more sustainable fix can be made to https://github.com/PolymerElements/neon-animation/issues/115

Upvotes: 1