[SalesForce] lightning:datatable actions menu is hidden

The actions menu that is supposed to show when you click on the downward arrow on the right-end of a row is not showing.

My component is dead simple: there is a lightning:datatable inside it containing a single row of data. The component is plugged into a Lightning Record Page, inside a tab. Everything renders fine however the actions menu is visually hidden.

Upon a quick inspection of the page my attention was drawn to the following inner-div:

<lightning-datatable>
    <div class="slds-table--header-fixed_container slds-scrollable_x">
        <div tabindex="-1" class="slds-scrollable_y">
            <table>...</table>
        </div>
    </div>

The slds-scrollable_y class has the following 2 properties that are hiding the dropdown list:

overflow: hidden;
overflow-y: auto;

I can overwrite the styling using CSS, however as Alexander Graham Bell must've once said, when one door opens another closes: the datatable is now cut off at the bottom and the action menu still doesn't show.

I can wrap the datatable within a div and make it tall, but needless to say that's a bad solution.

Related question (bot doesn't solve my problem): lightning:buttonMenu dropdown alignment

Best Answer

As it turns out the overflow properties had to be set to visible not just on the slds-scrollable_y class but also on the slds-scrollable_x class.

Problem solved.

Related Topic