Closed ghost closed 5 years ago
This is happening because you overwrote the angular-material classes.
.md-virtual-repeat-container .md-virtual-repeat-scroller {
overflow-x: auto;
}
When that css is removed everything works fine.
I notice that but i need to add the horizontal scrollbar in md-virtual-repeat-scroller. With the fix in VirtualRepeat.js this work fine with and without scrollbar.
I get the same behavior on both CodePens (from OP and from @codymikol) above. I'm using Chrome 69 on macOS.
I don't see any blank lines as stated in the OP. Is the problem that 1998 and 1999 aren't shown in the viewport?
Can you explain more about what you are trying to do with your fix?
It does fail to render the virtual-scroll with that extra CSS
Ubuntu - Chrome 69
If you scroll a little bit everything pops into view
I have the same behavior as codymikol with my codepen example, on Ubuntu 18.04, Windows 7, Windows 10, with Chrome 69, Firefox 62 and Edge. The list box are empty when i click on button Go to End.
This do not occur with codymikol codepen.
If i scroll slowly i get all the lines. If i scroll fast or with the button, i don't have the lines.
For what it's worth, this bug also manifests itself when the stylesheet is unchanged and the browser zoom is set to a value other than 100%, like 110%. (this.scroller.scrollTop
is larger than this.scrollSize - this.size
in VirtualRepeatContainerController.prototype.handleScroll_
when scrolling quickly to the end, which prevents the last items from showing. Specifically, this.scroller.scrollTop
is a fractional value slightly larger than the supposed maximum value.) This patch fixes that issue too.
Bug, enhancement request, or proposal:
CodePen and steps to reproduce the issue:
CodePen Demo which demonstrates the issue:
Detailed Reproduction Steps:
What is the expected behavior?
Last lines rendered
What is the current behavior?
Blank lines
What is the use-case or motivation for changing an existing behavior?
Fix it
Which versions of AngularJS, Material, OS, and browsers are affected?
Is there anything else we should know? Stack Traces, Screenshots, etc.
This occurs when needed to add a horizontal scrollbar in md-virtual-repeat-scroller.
Fixing : virtualRepeat.js Function : VirtualRepeatContainerController.prototype.handleScroll_ Change line :
To :