vaadin-date-picker-light Overlay height

Flow
1

I need to set a max height for the overlay, so that it only shows 1 month. Howver, none of the suggestions I’ve found will allow me to set a max-height for the overlay. I’ve tried:
.custom-height-date-picker {–vaadin-date-picker-overlay: { max-height:300px; } }
or:
:root { --vaadin-date-picker-overlay: { max-height: 300px; }; }

Any suggestions or help would be greatly appreciated!

2

Hi Jeses! Sorry for the late reply.

If you update to the latest pre-release version of vaadin-date-picker (v3), the overlay height is already reduced to ~1.5 months.

For v1, you should use the --vaadin-date-picker-overlay mixin (like you tried before).

If you are using vaadin-date-picker v2 or later, you need to use custom style modules to target the overlay. Here’s the
documentation how to do that
.

A short example (put this in your index.html):

<dom-module id="my-date-picker-styles" theme-for="vaadin-date-picker-overlay">
  <style>
    [part="overlay"]
 {
      max-height: 300px;
    }
  </style>
</dom-module>