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>
</div>
<table class="slds slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-scrollable_y">
<thead>
<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>
</tr>
</thead>
<tbody>
<!-- Use the Apex model and controller to fetch server side data -->
<aura:iteration items="{!v.product}" var="product">
<tr>
<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>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</aura:component>
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
max-height
of300px
instead of anheight
of300px
? – Martin Lezer Feb 13 '18 at 13:45