+ Start a Discussion
Yuen Lye KonYuen 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
<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 ? '&#8593;' : '&#8595;'}
                                    </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>

User-added image
User-added imageUser-added image
Best Answer chosen by Yuen Lye Kon
Team Codekiat.comTeam Codekiat.com
I see that in all the cases it is with the scroll bar at the right side and hence the menu items are out of context. 

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

Team Codekiat.comTeam Codekiat.com
I see that in all the cases it is with the scroll bar at the right side and hence the menu items are out of context. 

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
This was selected as the best answer
Yuen Lye KonYuen Lye Kon
Hi Naveen,
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?

User-added image
Team Codekiat.comTeam Codekiat.com
not sure about that. can you try with lightning:datatable which gives all these options. 

--
Naveen K N