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? Commented Feb 13, 2018 at 13:45
  • no it didn work i tried that also. :(
    – Quddus
    Commented Feb 13, 2018 at 14:27

1 Answer 1


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'}"

You must log in to answer this question.

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