I have a modal form appearing on a button click. Basically just setting the flag to true and the modal is rendered (it's always on the page). The modal contains multiple fields, one of which is the lightning-input date field. The lightning-datepicker that appears after a user clicks on the date field goes outside of the modal form, and this is a huge issue. I've solved that by adding the following:

.slds-modal__content {
  overflow: scroll !important;

Now a scroll appears and a user can scroll down and pick the correct date. I'm wondering if there's a better way to solve this. Without using a scroll? Does anybody have some solutions? enter image description here

2 Answers 2


Instead of scroll, use overflow CSS property, which will show Calendar on the top on modal component.enter image description here

And if you want to have Scrollable , then the Modal body tag should have scroll class - "modal_content_scroll"

  • I did use the overflow property but then the calendar gets cut by the end of the screen.
    – Walker
    Feb 3, 2022 at 10:49

Did you roll your own modal lwc? Maybe try james simone's? Not sure if it will fix your issue but I know him and a bunch of other contributors thought through a whole bunch of scenarios.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .