0

I have a Table and in each row lookup lightning input field , the problem is that the drop-dawn on the field are not over the next row so I cannot this it how it is : enter image description here

How it is suppose to be :

enter image description here

I see the drop down, the problem is that it do not exceed the specific line.

the table :

 <table class="slds-table slds-table_cell-buffer slds-table_bordered">
    <thead>

        <tr class="slds-line-height_reset">
            <th  scope="col">
                <div class="slds-truncate" title="ID" >ת.ז</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" >שם ושם משפחה</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" >סטטוס</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Stage">שם מסלול</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Confidence">תאריך התחלה</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Amount">תאריך סיום</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Contact">מספר חשבונית</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Contact">סכום</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Contact">תאריך</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Contact">אמצעי תשלום</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="confirm">אישור</div>
            </th>
              <!-- <th class="" scope="col">
                <div class="slds-truncate" title="Contact">שם מסלול מוצע</div>
            </th>  <th class="" scope="col">
                <div class="slds-truncate" title="Contact">תאריך התחלה</div>
            </th>  <th class="" scope="col">
                <div class="slds-truncate" title="Contact">תאריך סיום</div>
            </th> -->
        </tr>
    </thead>

    <tbody style="height: 5px; overflow: scroll; ">  
        <aura:iteration items="{!v.Payments}" var="payment">


            <tr class="slds-hint-parent">
            <td data-label="ID" >
                <div class="slds-truncate" >{!payment.Customer_ID}</div>

            </td>
            <td data-label="Contact">
                    <lightning:recordEditForm aura:id="recordViewForm"
                    recordId="{!v.Payments.Id}"
                    objectApiName="Payment__c">
                <div class="slds-truncate" >



                     <lightning:layout>
                        <lightning:layoutItem size="10">
                            <!-- <div onchange="{!c.onAccountChange}" data-accountid="{!payment.Account}" data-paymentid="{!payment.PaymentId}"> -->
                                <lightning:inputField variant="label-hidden" fieldName="Account__c" value="{!payment.Account}"/>

                            <!-- </div> -->
                        </lightning:layoutItem>
                        <lightning:layoutItem size="2">
                            <div> 
                                <div  onclick="{!c.onAccountChange}" data-subscriptionid="{!payment.Subscription}" data-accountid="{!payment.Account}" data-paymentid="{!payment.PaymentId}">
                                        <lightning:buttonIcon  iconName="utility:save" size="medium" variant="bare" alternativeText="שמור" iconClass="dark" /> 
                                </div>
                                <aura:if isTrue="{!payment.Account!=null}">

                                    <div  onclick="{!c.viewAccount}" data-accountid="{!payment.Account}">
                                        <lightning:buttonIcon  iconName="utility:preview" size="medium" variant="bare" alternativeText="ראה" iconClass="dark" /> 
                                    </div>
                                </aura:if>
                            </div>
                        </lightning:layoutItem>
                    </lightning:layout> 

                </div>
                </lightning:recordEditForm>
            </td>
            <td data-label="Status">

                <aura:if isTrue="{!payment.isAccountStatusIsLeft}">
                    <div class="slds-truncate slds-text-color_error" >{!payment.AccountStatusLabel}</div>
                    <aura:if isTrue="{!payment.RelatedAccountName!=null}">
                        <div class="slds-truncate slds-text-color_error" >{!payment.RelatedAccountName} </div>
                    </aura:if>
                <aura:set attribute="else">
                    <div class="slds-truncate" >{!payment.AccountStatusLabel}</div>
                    <aura:if isTrue="{!payment.RelatedAccountName!=null}">
                        <div class="slds-truncate " >{!payment.RelatedAccountName} </div>
                    </aura:if>
                  </aura:set>
                </aura:if>

            </td>
            <td data-label="Subscription">

                <div class="slds-truncate" >



                            <aura:if isTrue="{!payment.Account!=null}">
                            <aura:if isTrue="{!payment.Subscription!=null}">
                                <lightning:layout>
                                <lightning:layoutItem size="8">
                                    <div class="slds-truncate "  >{!payment.ProductName}</div>
                                </lightning:layoutItem>
                                <lightning:layoutItem size="4">
                                    <lightning:layout>
                                    <aura:if isTrue="{!payment.Subscription!=null}">
                                        <div onclick="{!c.openModalNewSub}" data-param="edit" data-accountid="{!payment.Account}" data-paymentid="{!payment.PaymentId}" data-subscriptionId="{!payment.Subscription}"  data-enddate="{!payment.SubscriptionEndDate}" data-pymtamount="{!payment.PaymentTranAmount}">
                                            <lightning:buttonIcon   iconName="utility:edit" size="medium" variant="bare" alternativeText="שנה" iconClass="dark" />
                                        </div>
                                        <div onclick="{!c.viewSubscription}" data-subscriptionId="{!payment.Subscription}" >
                                            <lightning:buttonIcon   iconName="utility:preview" size="medium" variant="bare" alternativeText="ראה" iconClass="dark" />
                                        </div>
                                    </aura:if>

                                    </lightning:layout>

                                </lightning:layoutItem>
                                 </lightning:layout> 
                               <div  onclick="{!c.openModalNewSub}" data-param="new"  data-accountid="{!payment.Account}" data-paymentid="{!payment.PaymentId}" data-subscriptionId="{!payment.Subscription}"  data-enddate="{!payment.SubscriptionEndDate}" data-pymtamount="{!payment.PaymentTranAmount}">
                                <lightning:button label="מנוי חדש" iconName="utility:add" iconPosition="right" />        
                                <!-- <lightning:buttonIcon   iconName="utility:add"  size="medium" variant="bare" alternativeText="add" iconClass="dark"/> -->
                                    </div>
                                <aura:set attribute="else">
                                    <div onclick="{!c.openModalNewSub}" data-param="new" data-accountid="{!payment.Account}" data-paymentid="{!payment.PaymentId}" data-subscriptionId="{!payment.Subscription}"  data-enddate="{!payment.SubscriptionEndDate}" data-pymtamount="{!payment.PaymentTranAmount}">
                                        <lightning:button label="מנוי חדש" iconName="utility:add" iconPosition="right" />
                                    </div>
                                </aura:set>
                             </aura:if>
                            </aura:if>




                </div>

            </td>
            <td data-label="SubscriptionStartDate">
                <div class="slds-truncate" ><lightning:formattedDateTime value="{!payment.SubscriptionStartDate}"/></div>
            </td>
            <td data-label="SubscriptionEndDate">
                <div class="slds-truncate" ><lightning:formattedDateTime value="{!payment.SubscriptionEndDate}"/></div>
            </td>
            <td data-label="PaymentInvoiceNumber">
                <div class="slds-truncate" >{!payment.PaymentInvoiceNumber}</div>
            </td>
            <td data-label="PaymentTranAmount">
                <div class="slds-truncate" >
                    <aura:if isTrue="{!or(payment.PaymentTranAmount>1500 ,0>payment.PaymentTranAmount)}">
                            <div class="slds-truncate  slds-text-color_error" >{!payment.PaymentTranAmount} ₪
                                <lightning:helptext content="סכום לא תקין" iconName="utility:warning" iconVariant="error"/>
                            </div>
                        <aura:set attribute="else">
                            <div class="slds-truncate " >{!payment.PaymentTranAmount} ₪</div>
                        </aura:set>
                    </aura:if>

                </div>
            </td>
            <td data-label = "PaymentTranDateTime">
                <div class = "slds-truncate" ><lightning:formattedDateTime value="{!payment.PaymentTranDateTime}"/></div>
            </td>
            <td  data-label="PaymentMethod">
                <lightning:layout>
                    <lightning:layoutItem size="10">
                        <aura:if isTrue="{!and(payment.isChequePymtNotOk==true,payment.PaymentMethodApiName=='3')}">

                            <div class="slds-truncate slds-text-color_error" >{!payment.PaymentMethod}
                                <lightning:helptext content="{!'פרטים לא תקינים : '+payment.chequeErrorMessage}" iconName="utility:warning" iconVariant="error"/>
                            </div>

                            <aura:set attribute="else">
                                <div class="slds-truncate" >{!payment.PaymentMethod}</div>
                            </aura:set>
                        </aura:if>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="2">
                        <div  onclick="{!c.viewPayment}" data-paymentid="{!payment.PaymentId}">
                            <lightning:buttonIcon  iconName="utility:preview" size="medium" variant="bare" alternativeText="ראה" iconClass="dark" /> 
                        </div>
                    </lightning:layoutItem>
                </lightning:layout>
            </td>
            <!-- <td data-label="Proposed subscription">

            </td>
            <td data-label="Proposed subscription start date">
                <div class="slds-truncate" ></div>
            </td>
            <td data-label="Proposed subscription end date">
                <div class="slds-truncate" ></div>
            </td> -->
            <td data-label="Confirm">
                <div class="slds-truncate" >
                    <lightning:input name="{!payment.PaymentId}" type="toggle" onchange="{!c.toggleConfirmOnChange}" checked="{!payment.isApproved}" messageToggleActive="" messageToggleInactive="" />
                    <aura:if isTrue="{!payment.paymentStatusApiName=='2'}">
                        <div class="slds-truncate slds-text-color_success" >{!payment.paymentStatusLabel} </div>   
                        <aura:set attribute="else">
                            <aura:if isTrue="{!payment.paymentStatusApiName=='4'}">
                                <div class="slds-truncate slds-text-color_error" >{!payment.paymentStatusLabel} </div>           
                                <aura:set attribute="else">
                                    <div class="slds-truncate " >{!payment.paymentStatusLabel}</div>    
                                </aura:set>
                            </aura:if>
                        </aura:set>
                    </aura:if>


                </div>
            </td>
        </tr> 



    </aura:iteration>
    </tbody>
</table>  
  • Are you using any custom styling, have you overridden standard style classes of slds? – rahul gawale Dec 31 '19 at 11:34
  • no , just this : .THIS.comp { background-color: white; } – Raphael D Dec 31 '19 at 12:14
1

I think you need to take <div class="slds-truncate"> out from around your lookup. That's using overflow: hidden which is hiding your dropdown.

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.