[date-picker] Spacing between infinite-scroller items inconsistent

[anselm92]

Description

The margin between the months in the datepicker is inconsistent, for most elements there is a huge gap (which is fine) but for some there isn't. See the image.

Expected outcome

All items of the infinite-scroller (months) should use the same margin

Actual outcome

Some elements use only small margins

Live Demo

Steps to reproduce

1. Go to https://vaadin.com/components/vaadin-date-picker/html-examples/date-picker-basic-demos
2. Scroll eg. to August 2017, you'll see that for this element the top margin is way smaller than it should be.

Browsers Affected

• [x] Chrome
• [ ] Firefox
• [ ] Safari
• [x] Edge
• [ ] IE 11
• [ ] iOS Safari
• [ ] Android Chrome

[web-padawan]

Note this has been previously reported as vaadin/vaadin-date-picker#258 and still valid.

[jouni]

Yeah, this is a conscious compromise, so that the space between the months is never too big or small.

To fix this, as far as I know, we would need a virtual scroller that can work with item heights with a small variation, and still produce a reasonably accurate positioning when using the year scroller to jump to a month. The current implementation expects all items to have the same height.