Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It only takes a minute to sign up.
Sign up to join this community
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.
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>
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
I've set the overflow: hidden; on the input element, and it solved the issue.
before:
after:
