I am using a lightning component which displays data as received from associated object record.

Below code:

<aura:component controller="ProductDetailController" implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global">
    <aura:attribute name="product" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler event="force:refreshView" action="{!c.doInit}" />
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}" />
    <aura:handler event="aura:waiting" action="{!c.showSpinner}" />
    <aura:attribute name="displayBlock" type="Boolean"/>
    <div class = "slds-clearfix slds-card">
        <div class="slds-page-header">
            <h2 class="slds-page-header__title slds-truncate slds-align-middle">Product Details</h2>
            <table class="slds slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-scrollable_y">
                        <tr class="slds-text-heading--label">
                            <th scope="col" style="width:200px;font-weight: bold;"><div style="white-space: normal;word-wrap:break-word;overflow-wrap: break-word;" title="Name">Name</div></th>
                            <th scope="col" style="width:200px;font-weight: bold;"><div style="white-space: normal;word-wrap:break-word;overflow-wrap: break-word;" title="Type">Quantity Type</div></th>
                        <!-- Use the Apex model and controller to fetch server side data -->
                        <aura:iteration items="{!v.product}" var="product">
                                <td><div style="white-space: normal;word-wrap:break-word;overflow-wrap: break-word;" title="{!product.Name}">{!product.Name}</div></td>
                                <td><div style="white-space: normal;word-wrap:break-word;overflow-wrap: break-word;" title="{!product.Sales_purpose__c}">{!product.Quantity}</div></td>

If i specify height then even if there were two records in the table it shows the empty space and if i dont specify height then the scroolbar doesnt work here.

what i want to do is if it reaches the max height of 300px the scroll bar should show and else based on the row it should show the data , there shouldn be empty blank space.

If anyone can help me here....thanks

  • Does it work if you only specify a max-height of 300px instead of an height of 300px? – Martin Lezer Feb 13 '18 at 13:45
  • no it didn work i tried that also. :( – Quddus Feb 13 '18 at 14:27

I figure out a solution to this , I am dynamically setting the height from the controller based on the row count style="{!'height:' + v.dynamicheight+'px'}"

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.