Can't get core-list to display after upgrade

[olemartin]

After I upgraded from 0.4.2 this code stopped working. I have read documentation, and I think I have implemented it correctly.

Please help.

<link rel="import" href="../../bower_components/core-list/core-list.html">

<polymer-element name="new-player" attributes="tournamentId" vertical layout>

    <template>
        hello
        <core-list data="{{personas}}">
            <template>
                <div class="item {{ {selected: selected} | tokenList }}">
                    {{model.name}}
                </div>
            </template>
        </core-list>

    </template>
    <script>
        Polymer("new-player", {
            created: function() {
                this.personas = [{"name": "Ole"}, {"name": "Per"}];
            }
        });
    </script>
</polymer-element>

[olemartin]

btw, all other core and paper tags seems to work for me.

[mbleigh]

:worried: I'm having the same problem. My code:

<core-list id="list" flex height="64" data="{{songs}}">
  <template>
      <song-listing song="{{model}}" on-enqueue="{{handleEnqueue}}"></song-listing>
  </template>
</core-list>

I'm poking around in the code to see if I can suss out what's happening.

[olemartin]

Using

<template repeat="{{personas}}"

works as expected. So there shouldn't be anything wrong with the array.

[olemartin]

Seems like the error is in the initializeData function in core-list (line 650 in release 0.5.1)

      this._physicalCount = Math.min(Math.ceil(this._target.offsetHeight / (this._physicalAverage || this.height)) * this.runwayFactor * this._rowFactor, this._virtualCount);

At my computer this._target.offsetHeight is 0 which leads to physicalCount being zero no matter what. When changing this to this._physicalCount = 2, my two list items are displayed..

[mbleigh]

@olemartin try calling coreListEl.updateSize() -- at least part of the problem for me seemed to be related to it not having correct self-sizing information to determine the proper dimensions. By adding this as an async method call once the list's tab became visible, I got to a whole new error.

[olemartin]

@mbleigh Yes, I tried that. Had to put the call in the domReady-lifecycle-function in order to not get any errors. But the list is still empty..

[Ortham]

+1 for this issue. I just started trying out core-list today with Polymer 0.5.1, and was convinced I was somehow doing it wrong, until I saw olemartin's this._physicalCount post above. Editing that line to set a fixed physical count worked for me.

[kevinpschaaf]

The change to core-list in 0.5.0 that added variable height support requires that the list be visible when shown, or else updateSize needs to be called when the list becomes visible or changes size (e.g. when changing core-pages to a page containing a list. Sorry if the docs were a little light on this point.

The general solution we have considered for this class of issues is detailed in https://github.com/Polymer/polymer/issues/849. I'll go ahead and start on that solution, since the issue reared its head pretty quickly for you guys.

For those still having your lists not rendered, if you navigate to the place in your app where the list should be rendered, select the <core-list> in the inspector, and manually call $0.updateSize(), does that fix the problem? If not, I'll need to get more details on your setup (a JSBin/JSFiddle that repros the issue would be best).

[kevinpschaaf]

I reproduced https://github.com/Polymer/core-list/issues/48 which was preventing the manual updateSize call from working in some cases, and landed the fix for that. For now, calling updateSize after changing a page should work (using master), and solution for https://github.com/Polymer/polymer/issues/849 should make needing to do that unnecessary.

[mbleigh]

@kevinpschaaf I can confirm that things are working as expected after the fix for #48 landed.

[olemartin]

It still doesn't work for me after updating from master

This is my component:

<link rel="import" href="../../bower_components/core-list/core-list.html">

<polymer-element name="new-player-test" attributes="tournamentId" vertical layout>

    <template>
        hi
        <core-list data="{{personas}}" id="personaslist">
            <template>
                <div class="item {{ {selected: selected} | tokenList }}">
                    {{model.name}}
                </div>
            </template>
        </core-list>

    </template>
    <script>
        Polymer("new-player-test", {
            created: function () {
                this.personas = [{"name": "Ole"}, {"name": "Per"}];
            },
            ready: function () {
                this.$.personaslist.updateSize();
            }
        });
    </script>
</polymer-element>

The error is in core-list, at line 652, saying that this._target.offsetHeight is undefined. Commenting out that line at setting _physicalCount to a static value makes the list appear.

[kevinpschaaf]

@olemartin Okay, so two issues with above:

1. core-list must render its contents into a "scrollable" element (e.g. overflow:auto) that has a constrained size such that its contents can scroll. By constrained size, typically this means it uses a fit or flex layout attribute or has a fixed height style. This can happen one of two ways: the core-list instance itself can be sized (e.g. have fit, flex, or height). Alternatively, you can nest core-list in a parent element that has overflow:auto; in this second case you must also set the scrollTarget property of core-list to point to the element you are delegating scrolling to. In the above example, it's not clear that either is happening. The core-list has no layout attributes, nor does the new-player-test. If core-list was given flex attribute, that would size the list into the parent, and then as long as new-player-test was sized where it's used (e.g. has fit or flex), it would work.
2. There is no need to call updateSize from ready. If the list is visible when attached, list will use the correct sizes. If it's not visible, then updateSize needs to be called at the point that the list becomes visible, so calling updateSize in ready isn't helping you here. I did notice from you're repro case that there's a race condition where calling updateSize from a parent's ready before the list has a chance to initialize and causes an error to be thrown (the one you noted); I'll fix that to avoid the error, but that's a red herring, since it shouldn't be called here anyway.

In short, I believe that fixing your sizing should solve your issue.

[kevinpschaaf]

This works:

<polymer-element name="new-player-test" attributes="tournamentId" vertical layout>

    <template>
        hi
        <core-list data="{{personas}}" id="personaslist" flex>
            <template>
                <div class="item {{ {selected: selected} | tokenList }}">
                    {{model.name}}
                </div>
            </template>
        </core-list>

    </template>
    <script>
        Polymer("new-player-test", {
            created: function () {
                this.personas = [{"name": "Ole"}, {"name": "Per"}];
            }
        });
    </script>
</polymer-element>

<new-player-test fit></new-player-test>

Note:

• flex on core-list
• fit on new-player-test where it's used (could be flex or whatever depending on the use case)
• no need for updateSize in ready; only call it after showing a previously hidden list or when manually resizing the list

[olemartin]

@kevinpschaaf Thank you! I got it to work.

The problem is that I am displaying the core-list inside a paper-dialog, and currently I don't know when the paper-dialog is displayed. Can't find any callback on that element. I added a setTimeout(updateSize, 1000), but that seems strange :-)

You may close this issue if I am going out of scope of this issue.

[flagadajones]

Hi I have a render problem(no render) of a core-list element when my custom element is in core-animated-pages

here is a jsfiddle when it works( grey list) ==> album-grid outside core-animated-pages http://jsfiddle.net/flagadajones/yq30u78d/

here is a jsfiddle when id doesn't works( no grey list) ==> album-grid inside core-animated-pages http://jsfiddle.net/flagadajones/m87sd0x3/2//

[kevinpschaaf]

@flagadajones This is a symptom of the issue I described in this comment https://github.com/Polymer/core-list/issues/47#issuecomment-62984962 related to a general problem around coordinating the timing of elements that need to measure themselves (e.g. core-list) with elements that hide/show/resize their children (core-animated-pages). This will be resolved in https://github.com/Polymer/polymer/issues/849, which is currently in progress.

In the meantime, adding call to .updateSize() at startup and any time the core-animated-pages page changes (e.g. core-animated-pages-transition-prepare) should be a temporary workaround for you.

http://jsfiddle.net/zg5k5wez/4/

[ulrichSchreiner]

hi, i have a core-list as a page in a "core-anmate-pages" but another page is displayed first. When the first (login) page is focused (textfield is clicked) the invisible core-list calls

updateSize --> _resetIndex

but in "updateSize" the method "this._getFirstVisibleIndex()" is called and this method returns "undefined"! so the whole update does not work and later on "_virtualStart" is "NaN" and the result is, that the list does not show anything.

if i do not enter anything in my login and only click my login-button, this "updateSize" is not called and the list works fine.

as a workaround i inserted a "return 0" at the end of "_getFirstVisibleIndex" because this function returns only values if _physicalCount>0 which is not the case.

[silentHoo]

The same problem here.

My workaround for this is to set the height of the core-list manually by setting the styling height via JavaScript until there's no fix available. My thread at SO is here: https://stackoverflow.com/questions/27251551/why-does-core-list-doesnt-set-a-height-within-a-core-header-panel

[kevinpschaaf]

Resolved via https://github.com/Polymer/polymer/issues/849 and https://github.com/Polymer/core-list/commit/86b8754d2014769a69890bff327152005d4c8606. Calling updateSize manually is no longer required when used in containers that use the CoreResizer mixin such as core-animated-pages, core-splitter, core-overlay, etc.

[gazialankus]

I really like the explanation here: https://github.com/Polymer/core-list/issues/47#issuecomment-63126241

But wouldn't it be nicer to display a warning instead of not rendering the elements at all? Right now, if you have a sizing issue core_list_dart doesn't even create the DOM elements. This makes one think that there is a bug somewhere, possibly in core_list_dart. Had it created the DOM elements in a way that looks ugly, or had it displayed a warning message that elements cannot be created to prevent an ugly look, it would be closer to what one would expect.

Silently refusing to create the DOM elements confuses the programmer.

[mafiuss]

Appears that #56 maybe a duplicate of this issue

[JustinXinLiu]

Hi @kevinpschaaf, since the bug is already fixed in 5.2, I am not sure why your jsbin (http://jsfiddle.net/zg5k5wez/4/) sample still doesn't work if I remove all the updateSize() code? Am I missing something here? Thanks in adv.

[kevinpschaaf]

@JustinXinLiu Thanks, that pointed out a missing resize notification in core-animated-pages for the initially selected page. Fixed in https://github.com/Polymer/core-animated-pages/commit/91434b14f3218378258f639897a89a0a2b913194.

[kevinpschaaf]

@gazialankus: For now, I've added a console.warn when the core-list is mis-sized: https://github.com/Polymer/core-list/blob/master/core-list.html#L663, which should be logged for this sort of user error.

[JustinXinLiu]

Thanks @kevinpschaaf. Work like a charm!