size mismatch

[defields923]

I am having an issue since I upgraded from version 1.x to the latest. I have a list of elements all the same size within a ul that has a height of calc(100% - 31px). vs-repeat appears to be working, but I get that size mismatch error in the console, and many more are logged when I scroll. I tried adjusting the size option like so 'vs-repeat="{size: ...}"' to try and match the expected size, but I can only get as close as .000000001... to it no matter how much I try.

Was this an issue in the earlier version that just wasn't logged? What should I do to correct this, or is there at least a way of turning the logging off?

[XueDong369]

I have the same problem with you!
vsRepeat: size mismatch. Expected size 0px whereas actual size is 287px. Fix vsSize on element: <ul class=​"common-list-content" vs-repeat=​"{size:​ 36}​">​…​</ul>​

[tje3d]

You cant get rid of size mismatch, because if you set fixed size for your vs-repeat, you always have this warning, and if you don't set it, You don't have any scroll ( because the size of vs-repeat should not be same as sum of all elements height )

Any suggestion?

Edit

Whoops! i've upgraded to 2.0.9 and there is no problem any more, My markup:

<div class="overview vs-repeat-custom-scroll" vs-repeat> <!-- style="height: calc(100%); overflow: auto;" -->
    <div ng-repeat="group in groups | groupsList:groupsFilter:searchGroup" ng-class="{conv_selected: group.active}" ng-click="selectGroup(group)">
        <!-- ... -->
    </div>
 </div>

[matortheeternal]

I've experienced this issue on v1.1.11 as well as v2.0.9. I tried setting autoresize to true in the vs-repeat attribute options, but this did not fix the issue. Hardcoding a size does not make sense for my application where the window is resizable. My temporary solution is to downgrade back to v1.1.7. The size should just be computed based on the element's size by default like it was in v1.1.7, without requiring any dirty CSS workarounds like height: calc(100%).

[XueDong369]

I am using v2.0.9 now, but this problem always not fixed yet!

[tje3d]

My problems is when i apply a filter to my ng-repeat, and the height of my items goes lower than vs-repeat height, i always have size mismatch warning.
a hackfix is to calculate vs-repeat size when a filter applies but this is not the correct way.

[icorne]

I also get this issue, and when using the latch option, it's complaining about the wrong size as well, als the size should be a lot smaller

[XueDong369]

@tje3d But it will cause the performance problem if the warning log always repeat ...

[tje3d]

@XueDong369 please check my pull request #206
it will prevent warning when there is no overflow scroll

[XueDong369]

@tje3d Yes, I've changed the local code to #206 temporarily, then it won't console the warning info. Thanks! But, my project will run in Docker and it will run 'bower install' in Docker every time when I deploy it. I hope #206 will be merged ASAP. _

[tcrite]

I had this same issue. Fixed it by inspecting every element in row and taking into account margins. Also had an inner element whose margin expanded pass the parent container causing the calculated size to be off.

[tcrite]

also, hiding the warning is just a mask...the underlying issue of the size being off will still end up in performance issues.

[juanjmunozgonzalez]

Hi, I get the same warning message and, what it is more relevant for IE11 (I'm forced to support it) the items are not rendered if I drag the scroll to the bottom. This only happens if I don't configure the item size, if I fix the item size, everything works but the performance gets worse, I experiment some glitches when I drag the scroll

[DanielRuf]

Any news?

[ibrychgo]

Same here. Getting this on list of md-cards (angularjs material). Was hoping for an easier solution to md-virtual-repeat.

[erceth]

I was able to work around the warning spam by removing the margin from my list elements. I think it was due to the fact that child margin doesn't affect parent height (https://stackoverflow.com/q/27829250/3038518). Perhaps a future fix for this bug would involve that information somehow.

[lslee714]

Love 3 year old issues

[kerryj89]

My previous comment (since deleted) was a false positive, but I am able to hide the warnings with the below snippet. I'm not well versed in AngularJS but piecing together some knowledge I was able to override (set?) sizeMismatchWarningsSilenced to true via decorator. I tried the more common way to config with angular.module('whatever', ['vs-repeat']).config(['vsRepeatConfig', function(vsRepeatConfig) {...}) but couldn't get it to work. Maybe someone more knowledgeable in AngularJS can see the error in my way.

angular.module('whatever', ['vs-repeat'])
    .config(['$provide', function($provide) {
        $provide.decorator('vsRepeatConfig', function($delegate) {
            return {
                ...$delegate,
                sizeMismatchWarningsSilenced: true
            };
        });
    }])