Material: feat(virtual-repeat-container): support horizontal scrollbar in vertical orientation

[JSitjaNCR]

Bug, enhancement request, or proposal:

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

Detailed Reproduction Steps:

1. Open Code Pen
2. Click button 'Go to End'

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?

• AngularJS: 1.6.7
• AngularJS Material: 1.1.10 and HEAD
• OS: Windows 7, Windows 10, Ubuntu
• Browsers: Chrome 69, Firefox 62, IE, and Edge

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 :

if (offset === this.scrollOffset || offset > this.scrollSize - this.size) return;

To :

if (offset > this.scrollSize - this.size) offset = this.scrollSize - this.size;
if (offset === this.scrollOffset) return;

[codymikol]

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.

Here is a working demo

[JSitjaNCR]

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.

[Splaktar]

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?

[codymikol]

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

[JSitjaNCR]

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.

[davidpolberger]

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.

[Splaktar]

Fixed in https://github.com/angular/material/commit/3cf4d7440289187ff57f1f341ec78c15941141d4.