This is my lightning component enter image description here

The problem is my date picker is displaying on the back and I am unable to select the date. I am using this Lightning component in quick action button.

The code for my lightning component is

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" 
            access="global" 
            controller="Pledge_Mgmt_Controller">

<aura:attribute name="payment" type="Payment__c" />
<aura:attribute name="paymentAmount" type="Double" default="1000"/>
<aura:attribute name="paymentNumber" type="Integer" default="0" />
<aura:attribute name="paymentInterval" type="Integer" default="0" />
<aura:attribute name="paymentDate" type="Date" />
<aura:attribute name="paymentMethod" type="String" default="Cash" />
<aura:attribute name="donation" type="Opportunity" />
<aura:attribute name="accountId" type="String" />
<aura:attribute name="paymentMap" type="Map" default="{}" />
<aura:attribute name="paymentList" type="Map[]"  />

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler name="schedulePaymentEvt" event="c:Schedule_Payment_Event" action="{!c.addPaymentToList}"/>

<div>

    <h4 class="slds-section__title slds-theme_shade">
        <span class="slds-truncate slds-p-horizontal_small" title="Section Title">Create a Payment Schedule</span>
    </h4>

    <div class="slds-form_stacked">
        <div class="slds-grid slds-gutters">
            <div class="slds-col slds-size_1-of-2">

                <lightning:input type="number" 
                                 name="currencyVal" 
                                 label="# of Payments" 
                                 step="1" 
                                 value="{!v.paymentNumber}"/>
            </div>
            <div class="slds-col slds-size_1-of-2">

                <lightning:input type="date" 
                                 label="Date of First Payment" 
                                 name="date" 
                                 value="{!v.paymentDate}"/>
            </div>
        </div>

        <div class="slds-grid slds-gutters">
            <div class="slds-col slds-size_1-of-2">
                <lightning:input type="number" 
                                 name="currencyVal" 
                                 label="Interval" 
                                 step="1"
                                  value="{!v.paymentInterval}"/>
            </div>
            <div class="slds-col slds-size_1-of-2">

                <lightning:input name="currencyVal" 
                                 label="Payment Method"  
                                 value="{!v.paymentMethod}" />
            </div>
        </div>

    </div>

    <div class="slds-align_absolute-center slds-p-vertical_small">
        <lightning:button label="Calculate Payment" title="Calculate Payment" onclick="{! c.calculatePayment }"/>
    </div>

</div>

<div>
    <div class="slds-p-vertical_small">

        <h4 class="slds-section__title slds-theme_shade">
            <span class="slds-truncate slds-p-horizontal_small" title="Section Title">Payments to be created</span>
        </h4>
    </div>

    <div class="slds-grow slds-scrollable_y">
        <table role="grid" class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_fixed-layout">
            <thead>
                <tr class="slds-text-title_caps">
                    <th scope="col"  style="width: 10%;">
                        <div class="slds-truncate">Payment Number</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate">Payment Amount</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate">Schedule Date</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate">Payment Date</div>
                    </th>
                    <th scope="col" style="width: 10%;">
                        <div class="slds-truncate">Paid</div>
                    </th>                    
                </tr>
            </thead>


            <tbody>

                <aura:iteration items="{!v.paymentList}"  var="paym">
                    <aura:if isTrue="{! v.paymentList.length > 0}">
                        <c:Schedule_Payment_List aura:id="itemForm" 
                                                 payment="{!paym}"
                                                 serialNumber="{!paym.pIndex}"/> 
                    </aura:if>
                </aura:iteration>
            </tbody>
        </table>

    </div>

    <div class="slds-align_absolute-center slds-p-vertical_small">
        <lightning:button label="Create Payment" title="Create Payment" onclick="{! c.createPayment }"/>
    </div>
</div>

Any help is greatly appreciated. Thanks in advance

EDIT : As recommended by @Praveen removing class from div worked partially but still date picker is not shown properly

enter image description here

Some more help needed :)

  • 1
    Can you try removing the slds-scrollable_y or both the classes on the div? – Praveen Jun 10 at 17:39

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.