vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
467 stars 83 forks source link

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

Open anselm92 opened 6 years ago

anselm92 commented 6 years ago

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

vaadin-date-picker-bug

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

web-padawan commented 6 years ago

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

jouni commented 6 years ago

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.