4

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 '18 at 17:39

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.