4

I'm in need of implementing a lightning component that includes ui:inputDate component with displayDatePicker=true.

The component is mainly only for sidebar purposes in Lightning Page. But when I place the component in sidebar, the datePicker goes beyond page boundaries like this: (notice the scrollbar at bottom)

enter image description here

The datePicker position is erratic when we click and focus inside the End Date field below. The date picker first time opens correctly (right aligned to inputText box) but on subsequent tries, anytime you click focus inside the textbox, it opens left aligned and thus goes beyond the page boundaries.

Can there be a fix for this?

The behavior can be reproduced using following code:

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="startDate" type="Date" />
    <aura:attribute name="endDate" type="Date" />

    <div class="slds-card slds-p-around_small">
        <div class="slds-grid slds-gutters">
            <div class="slds-col slds-size_1-of-2">
                <ui:inputDate value="{!v.startDate}" label="Start Date" labelClass="slds-form-element__label" displayDatePicker="true" updateOn="change" />
            </div>
            <div class="slds-col slds-size_1-of-2">
                <ui:inputDate value="{!v.endDate}" label="End Date" labelClass="slds-form-element__label" displayDatePicker="true" updateOn="change" />
            </div>
        </div>
    </div>
</aura:component>
0

I also faced similar kind of problem. It worked with below styling

.THIS .slds-datepicker .slds-day {

display : contents;
position: absolute;
z-index: 7000;
left: -0.71875px;    
}
  • I don't know how you got it working. The .slds-datepicker DOM element is not generated inside the custom Lightning Component we build here, so how are you getting this CSS being applied to it? And I tried and outcome for me was same as before. – VarunC Jul 17 at 14:07
0

Add

.THIS #inputDateOfBirthId .datePicker-openIcon {
    top: 35%;
    margin-right : 5px;
}

Where #inputDateOfBirthId is id of the outer div.

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.