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 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" />

Your Answer

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

Browse other questions tagged or ask your own question.