1

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.

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

4 Answers 4

1

Please update your lightning modal content styles like below code.

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

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

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

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

.container{
    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

0

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

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.