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.

  • Hi @rohit-maharashi, Is this a standard modal or a custom LWC component?
    – Patlatus
    Commented Nov 15, 2021 at 12:42

4 Answers 4


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 Commented Feb 18, 2021 at 6:24
  • I have this lightning-input inside a modal so can you suggest something else. Commented Feb 18, 2021 at 9:10

I've set the overflow: hidden; on the input element, and it solved the issue.

before: enter image description here

after: enter image description here


Assuming that you use some custom LWC modal component, you could replace the standard classes used with custom ones to remove 50% width constraint and some other which prevents date pickers from working correctly.

If you the following line in your modal html file:

<div class="slds-modal__container">

replace it with

<div class="container">

and add some styles from slds-modal__container to your custom css file

    position: relative;
    transform: translate(0, 0);
    transition: transform var(--lwc-durationQuickly,0.1s) linear,opacity var(--lwc-durationQuickly,0.1s) linear;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 var(--lwc-varSpacingXLarge, spacingXLarge);
    height: 100%;
    padding: var(--lwc-squareIconLargeBoundary,3rem) 0;
    border-radius: var(--lwc-borderRadiusMedium,0.25rem);

If you using your LWC inside the standard Quick Action modal, there is no other workaround that redirect to custom component

You must log in to answer this question.

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