Material: virtual-repeat: does not render items if it begins in hidden state

Created on 26 Aug 2015  Â·  18Comments  Â·  Source: angular/material

Most helpful comment

My quick hack was just wrapping the md-virtual-repeat-container with an ng-if:

<div ng-if="someCtrl.isSidenavReady">
<md-virtual-repeat-container>
<md-virtual-repeat md-on-demand md-virtual-repeat="thing in someCtrl.things">
</md-virtual-repeat>
</md-virtual-repeat-container>
</div>

I set the flag to true when the button that opens the sidenav is clicked. Causes the repeater to re-draw and works for me temporarily!

All 18 comments

+1 I just ran across this issue too

This could possibly be related to a similar bug documented in #4499.

Fixed as of 1.0-rc4

Probably related, virtual-repeat does not render when it is in a sidnav that is initially hidden. I'm using 1.0.5 and it's still happening. Works fine in sidenav that is initially open.

I am using 1.1.0-rc2 and it is still an issue. I was setting the scope for my repeater items before setting visible the md-virtual-repeat component. When setting the component visible, I then used this hack to force a redraw - angular.element(window).triggerHandler('resize');

I am on 1.1.0-rc5 and the problem still exists.

Also on 1.1.0-rc5 and the problem persist, ill test it on rc4

I came across this thread when looking for a cause of my virtualRepeat staying hidden.
Since it was in nested UI-Router states, I though bug described here was the case.

Turned out the cause was trivial:
I haven't added CSS height property to md-virtual-repeat-container element. (width for horizontal mode)
Analogous ng-repeat works without it,
so it should be mentioned in the docs…

Unrelated to the bug, but I hope someone will find this helpful.

My quick hack was just wrapping the md-virtual-repeat-container with an ng-if:

<div ng-if="someCtrl.isSidenavReady">
<md-virtual-repeat-container>
<md-virtual-repeat md-on-demand md-virtual-repeat="thing in someCtrl.things">
</md-virtual-repeat>
</md-virtual-repeat-container>
</div>

I set the flag to true when the button that opens the sidenav is clicked. Causes the repeater to re-draw and works for me temporarily!

@CharlesBean this is what I ended up doing as well

Still an intermittent problem in 1.1.4. I don't think it matters if it begins in a hidden state like the title might suggest. I could reproduce it intermittently whenever it would go from hidden to shown regardless of what the state started at upon page load. The ng-if work-around would have worked, but I couldn't use it in my case. However, I found that toggling just the visibility via ng-style also works around the issue.

+1 still an issue for me in 1.1.3

The issue within a SideNav was fixed in 1.1.2 (https://github.com/angular/material/issues/7309).

If you are still seeing this issue in 1.1.5, we're tracking an issue when inside of md-tabs in https://github.com/angular/material/issues/11002. If you can provide some information there and a CodePen reproduction, it would be appreciated.

If you are seeing this outside of md-tabs, please open a new issue with a reproduction.

@Splaktar I'm still getting this issue in 1.1.7 when a <md-virtual-repeat-container> is inside a <md-menu-content>. The content is initially blank when I open the menu, but as soon as I resize the window, the content appears.

Copy-and-pasting the same <md-virtual-repeat-container> outside the <md-menu-content> works - the items appear right away without resizing.

I'm guessing this has the same cause as the md-tabs issue.

I can workaround this by manually firing a resize event after opening the menu.

I'm not sure how I unassigned @kseamon but it was unintentional.

Yea. This is quite a big issue for us. Having to manually firing a resize event is just too hacky.

@aj-r no problem on the unassignment, GitHub just automatically does that since he is no longer a member of this team.

Can you please open a new issue for this issue with menus and include a CodePen demo? Please reference this issue in the new issue.

Was this page helpful?
0 / 5 - 0 ratings