How do you limit the height of the overlay of a vaadin-date-picker?

Question

I would like the vaadin-date-picker to only show two months when the overlay pops out. Is there a way to limit it to a number of months or to a specific height in pixels?

Answer 1

I solved this by adding a theme to the vaadin-date-picker element with the following CSS:

  .custom-height-date-picker {        
    --vaadin-date-picker-overlay: {
      max-height:300px;
    }
  }

And referencing the CSS class in the element:

<vaadin-date-picker class="custom-height-date-picker" label="Birthdate">
</vaadin-date-picker>