lightning:buttonMenu dropdown alignment

Question

I have a slds-table that contains an <aura:iteration> for displaying OpportunityLineItem records. The last column in the table is an action drop down menu as follows:

<aura:iteration items="{!v.olis}" var="oli"> 
    <tr class="slds-hint-parent">
        <!-- Other columns... -->
        <td role="gridcell">

            <lightning:buttonMenu iconName="utility:down" name="{! 'lquickAction_' + oli.Id}" alternativeText="Actions" onselect="{!c.buttonMenuQuickActionSelected}">
                <lightning:menuItem label="Do the Important Thing" value="4" />
            </lightning:buttonMenu>

        </td>
    </tr>
</aura:iteration>

It works fine for all the rows accept the last, where the dropdown appears off the bottom of the view able area.

How can I get this last problem menu to appear?

I did find the .slds-dropdown_bottom selector for .slds-dropdown. That seems to work as advertised, but I'd need to manually apply it to the last action in the iteration. Or even potentially look and how many menuItems are in each menu and if they will flow off the viewable area. It's starting to get a bit messy.

menuAlignment="bottom" isn't an option currently on the buttonMenu.

---

Increasing the z-index

As suggested, I tried increasing the z-index on the obscured dropdown div. I pushed it pretty high, but it still didn't show outside of the tabset that contains the lightning component.

Answer 1

I believe I've tracked the problem down.

The entire table was wrapped in a scrollable div. And then the table itself was marked .slds-scrollable_none to hide any overflow.

<div class="slds-scrollable slds-grow">
    <table role="grid" class="slds-table slds-table_fixed-layout slds-table_bordered slds-scrollable_none">
        <!-- ... -->
    </table>
</div>

Dropping all the scrolling related CSS classes sorted it out.