Polymer Iron list display is incorrect

user3589761
<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 ?

Omar BELKHODJA

Seems to be a known issue https://github.com/PolymerElements/neon-animation/issues/115

Please check my suggested solution on github.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Polymer iron-list

From Dev

Polymer 1.0: Sorting iron-list

From Dev

How to sort an iron-list in Polymer 1.0?

From Dev

Polymer iron-list iterates, but not printing

From Dev

Polymer iron-list dynamically adding items?

From Dev

How to filter an iron-list in polymer 1.0?

From Dev

Polymer 1.0 - iron-list - selection

From Dev

Tap listener for polymer iron-list item?

From Dev

Polymer iron-list iterates, but not printing

From Dev

Polymer iron-list showing outdated items

From Dev

Polymer 1.0: reference selected iron-list item in CSS

From Dev

Polymer 1.x: Deleting an item from iron-list

From Dev

How to reload / refresh an iron-list in Polymer 1.0?

From Dev

Polymer's iron-list won't show

From Dev

Google Polymer - Pass data from iron-list to custom element

From Dev

How to get model for element in iron-list (polymer dart)?

From Dev

how to make polymer iron-list keep expanding, instead of scolling

From Dev

Polymer-Dart iron-list not binding to selected-item

From Dev

Polymer v1.0 iron-list distance calculation as each item is created on the list

From Dev

Polymer Iron-Form response

From Dev

Polymer Iron-form not submitting

From Dev

Polymer Iron-Form response

From Dev

Polymer iron-ajax not working

From Dev

Polymer 1.0: Using template dom-repeat inside paper-menu elements to display iron-pages on selection

From Dev

Polymer iron-ajax/iron-request won't fire

From Dev

Polymer 1.0: Clickable item in dom-repeat to e.g. iron-page which contains further info (contact list)

From Dev

Polymer 1.0: Clickable item in dom-repeat to e.g. iron-page which contains further info (contact list)

From Dev

How to use iron-dropdown in Polymer 1.0?

From Dev

Polymer iron-select fires on element load

Related Related

  1. 1

    Polymer iron-list

  2. 2

    Polymer 1.0: Sorting iron-list

  3. 3

    How to sort an iron-list in Polymer 1.0?

  4. 4

    Polymer iron-list iterates, but not printing

  5. 5

    Polymer iron-list dynamically adding items?

  6. 6

    How to filter an iron-list in polymer 1.0?

  7. 7

    Polymer 1.0 - iron-list - selection

  8. 8

    Tap listener for polymer iron-list item?

  9. 9

    Polymer iron-list iterates, but not printing

  10. 10

    Polymer iron-list showing outdated items

  11. 11

    Polymer 1.0: reference selected iron-list item in CSS

  12. 12

    Polymer 1.x: Deleting an item from iron-list

  13. 13

    How to reload / refresh an iron-list in Polymer 1.0?

  14. 14

    Polymer's iron-list won't show

  15. 15

    Google Polymer - Pass data from iron-list to custom element

  16. 16

    How to get model for element in iron-list (polymer dart)?

  17. 17

    how to make polymer iron-list keep expanding, instead of scolling

  18. 18

    Polymer-Dart iron-list not binding to selected-item

  19. 19

    Polymer v1.0 iron-list distance calculation as each item is created on the list

  20. 20

    Polymer Iron-Form response

  21. 21

    Polymer Iron-form not submitting

  22. 22

    Polymer Iron-Form response

  23. 23

    Polymer iron-ajax not working

  24. 24

    Polymer 1.0: Using template dom-repeat inside paper-menu elements to display iron-pages on selection

  25. 25

    Polymer iron-ajax/iron-request won't fire

  26. 26

    Polymer 1.0: Clickable item in dom-repeat to e.g. iron-page which contains further info (contact list)

  27. 27

    Polymer 1.0: Clickable item in dom-repeat to e.g. iron-page which contains further info (contact list)

  28. 28

    How to use iron-dropdown in Polymer 1.0?

  29. 29

    Polymer iron-select fires on element load

HotTag

Archive