Error: collection-repeat tried to compute the height of repeated elements

[durasj]

There is one error that gets reported once in a while (really only like once a month or few months even though the component is used pretty extensively). Users don't report any issues, but it still gets triggered and sent by the automated system. It's unfortunately impossible for me to reproduce.

Here is the error:
Error: collection-repeat tried to compute the height of repeated elements "option in options track by $index", but was unable to. Please provide the "item-height" attribute. http://ionicframework.com/docs/api/directive/collectionRepeat/

I know this is very tricky, but maybe you would have some idea why this could happen. I think it could be some very low probability race condition.

Ionic version: 1.3.3

[bianchimro]

hi @durasj thanks for reporting.
Really no idea right now ... can you share a little bit of your code? (the modal-select related html should be enough)

regards

[durasj]

Hi @bianchimro,

sorry for late reply. There's simple abstraction around it to appear as a text field with the select button next to it and with translated texts etc. - nothing special.

<span class="button-addon">
    <input
        type="text"
        name="{{ ::select.name }}"
        ng-model="select.valueHr"
        class="modal-select"
        ng-required="select.ngRequired"
        ng-disabled="select.ngDisabled"
        readonly
    >
    <button
        type="button"
        ng-model="select.value"
        ng-hide="select.ngDisabled"
        modal-select
        modal-title="{{ ::select.title }}"
        options="select.options"
        option-property="{{ ::select.keyProperty }}"
        on-select="select.pickedValue(newValue)"
        has-search="true"
        selected-class="activated"
        search-properties="[ select.useProperty ]"

        search-placeholder="{{ ::select.searchTranslation }}"
        cancel-search-button="{{ ::select.clearTranslation }}"
        load-list-message="{{ ::select.loadingTranslation }}"
        cancel-button="{{ ::select.cancelTranslation }}"
        reset-button="{{ ::select.resetTranslation }}"
    >
        {{ ::select.pickTranslation }}
        <div class="option" ng-transclude></div>
    </button>
</span>

Since the height should be pretty much very predictable and shouldn't change with screen rotation etc. I was thinking it would be maybe good to specify the item-height (54px?). Or, if users can change the appearance and therefore the height, make it rather optional attribute on the plugin? I can submit the PR if wanted.

Thanks

[suisun2015]

I had a short trouble with this problem, and this trick solved the problem.
Just set use-collection-repeat attribute FALSE.

use-collection-repeat="false"

Why? Cos if the list has a number of options greater than short-list-break (default = 10) the modal will be rendered with ionic collection-repeat directive. So setting that as FALSE will stop that collection-repet error.

[durasj]

@suisun2015 I actually wanted the collection-repeat because the lists were sometimes huge. I've created a PR #102 that fixes it.

Anyway, it seems the author is no longer maintaining this repo.