Apex Code Development You need to sign in to do that
Don't have an account?
Yuen Lye Kon Lightning Button Menu Items are not visible in a table
I have an issue with lightning bottom menu item's that is within a data table whereby the menu items are not visible if the menu item appears as the last record of the data table (see the 2nd image) or if the data table consists of only 1 record (see the last image). Below is the sample code of the data table with the lightning button menu
Sample Code
Sample Code
<div class="slds-table--header-fixed_container" style="height: 100%">
<div class="slds-card__body slds-card__body_inner slds-scrollable--y" style="height: 100%">
<table class="slds-table slds-table--bordered slds-table--header-fixed">
<thead>
<tr class="slds-text-title--caps">
<aura:iteration items="{!v.columns}" var="col">
<th scope="col">
<div onclick="{!c.updateColumnSorting}"
class="slds-truncate slds-cell-fixed"
title="{! col.fieldName}" data-field="{! col.fieldName}">
{! col.label }
<span>
<aura:if isTrue="{!v.sortedBy == col.fieldName}">
{! v.sortAsc ? '↑' : '↓'}
</aura:if>
</span>
</div>
</th>
</aura:iteration>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.data}"
var="record" indexVar="indexVar">
<tr>
<th data-label="Title" class="{! 'popover_'+record.Id +' cell-solution-title-width'}">
<div class="slds-truncate cell-solution-title-width" title="{!record.Solution_Title__c}"
data-recordid="{!record.Id}" data-record="{! record}">
{!record.Solution_Title__c}
</div>
</th>
<th data-label="Category" class="{! 'popover_'+record.Id +' cell-solution-number-width'}">
<div class="slds-truncate cell-solution-number-width" title="{! record.Solution_Sub_Category__c}"
data-recordid="{!record.Id}" data-record="{! record.Solution_Sub_Category__c}">
{! record.Solution_Sub_Category__c}
</div>
</th>
<th data-label="Status" class="{! 'popover_'+record.Id}">
<div class="slds-truncate" title="{!record.Status__c}"
data-recordid="{!record.Id}" data-record="{! record}">
{!record.Status__c}
</div>
</th>
<th data-label="Author" class="{! 'popover_'+record.Id}">
<div class="slds-truncate" title="{!record.CreatedBy.Name}"
data-recordid="{!record.Id}" data-record="{! record}">
{!record.CreatedBy.Name}
</div>
</th>
<th>
<lightning:buttonMenu aura:id="menu" onselect="{! c.handleSelect }"
alternativeText="Menu" value="{!record.Id}" menuAlignment="right">
<lightning:menuItem value="{! 'E,'+record.Id +','+indexVar}" label="Edit"/>
<lightning:menuItem value="{! 'A,'+record.Id +','+indexVar}" label="Approve"/>
</lightning:buttonMenu>
</th>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</div>
Try to give fixed height to the data-table and make sure you add scroll bar only when the record count is more than 5 or 10
--
Naveen K N
All Answers
Try to give fixed height to the data-table and make sure you add scroll bar only when the record count is more than 5 or 10
--
Naveen K N
Yes I finally found out as well that menu items are not visible if the button menu resides in a div or table that has scrollable style properties. Therefore in the example in my previous thread, I can override the style property to disable overflow itself so that scrollbar won't be present. However the same can't be done if the component resides as a widget to a record page (see image below example). In this scenario, scroll bar has to be present to view all data table records and menu items will be hidden. Is there any alternatives to lightning:buttonMenu that will be able to show popup menu for data tables?
--
Naveen K N