I have a requirement wherein I used

<lightning-input type="date" variant="label-hidden"></lightning-input>

for adding a datepicker in a modal pop up. But, the date-picker doesn't display correctly and is cut off from the browser.

enter image description here

So, is there a way so that I can have date-picker expand in the upward direction and not in the downward direction? Any help on this would be appreciated.


Please update your lightning modal content styles like below code.

<div class="slds-modal__content" style="overflow: visible !important;">

You have to use inline styling: style="bottom: 100%"

The code will look like following:

 <lightning-input type="date" variant="label-hidden" style="bottom: 100%"></lightning-input>

enter image description here

  • I tried this but this doesn't help my cause Feb 18 at 6:24
  • I have this lightning-input inside a modal so can you suggest something else. Feb 18 at 9:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.