1

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

3 Answers 3

11

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.

4
  • 2
    what exactly did you do, to fix the hidden dropdown issue? Can you please add some code to your answer here?
    – VarunC
    Apr 17, 2018 at 7:39
  • 5
    I've been at this same problem for about an hour; this is what you need in the css of your lightning component: .THIS .slds-scrollable_x { overflow: visible; } and .THIS .slds-scrollable_y { overflow: visible; }. Note the space between .THIS and .slds-scrollable_x/y. May 6, 2018 at 10:45
  • 1
    It's strange that this doesn't work out of the box, but the code by @rael_kid works indeed. Do you have any documentation where you found this solution?
    – Folkert
    Jun 28, 2018 at 10:20
  • Been at this for another hour. None of these solutions work at all!!!!!!
    – Mr. B
    Sep 24, 2019 at 22:36
0

I'm working with Lightning Web Components. Turns out I just needed a plain old <div> tag around the table, and that's it.

Theory: Data table needs to live inside of a <div> to figure out its own damn dimensions:

<div>
   <lightning-datatable data={data} columns={RMADetailGridColumns} key-field="Id" 
      hide-checkbox-column sorted-by={SortBy} sorted-direction={SortDirection}
      onsort={HandleSortData} onrowaction={GridActionClick}>
   </lightning-datatable>
</div>
0

This is the correct answer for the lwc datatable.

In the 'column' attribute configuration, set the menuAignment row action property to 'auto'

See the below images and 'buttonMenu' lwc documentation for explanation.

Hard refresh your page

enter image description here

enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .