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>  
2
  • Are you using any custom styling, have you overridden standard style classes of slds? Dec 31, 2019 at 11:34
  • no , just this : .THIS.comp { background-color: white; }
    – Raphael D
    Dec 31, 2019 at 12:14

1 Answer 1

2

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .