1

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.

Lost buttonMenu dropdown

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.

enter image description here


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.

Attempt to increase the z-index

  • if you add/modify the z-index for that class, does it change anything,(the dropdown box, not the button itself) – glls Sep 25 '17 at 22:30
  • @glls Will give it a try and see if I can push it to the top of everything. – Daniel Ballinger Sep 25 '17 at 22:31
  • modifying the z-index should do the trick - check it live in your browser and let me know if it works =P – glls Sep 25 '17 at 22:31
  • @glls. It seems pretty stubbornly obscured by the tabset that contains it. – Daniel Ballinger Sep 25 '17 at 22:43
  • @glls The screenshot I added is from when the dropdown should be visible. Was tricky trying to capture it in a screenshot, but it is like that when the slds-is-open class is applied automatically to the parent div. – Daniel Ballinger Sep 25 '17 at 23:04
3

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.

Busted out of the scrollable area

  • I'm having an issue similar to this myself. I wrapped the table in a div with class="slds-scrollable_x" so that when the window width is too small it will break into a horizontal scroll rather than overly compress the table. But the result is that the vertical overflow gets set to hidden, and the buttonMenu tucks underneath getting hidden. I can't seem to figure out a way to allow the buttonMenu to pop out while still allowing the horizontal scroll. – Charles T May 8 '18 at 20:20
  • @CharlesT Hmm. Not sure on that one. Maybe raise a new question. – Daniel Ballinger May 9 '18 at 1:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.