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

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.

  • 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 '18 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. – rael_kid May 6 '18 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 '18 at 10:20
  • Been at this for another hour. None of these solutions work at all!!!!!! – Mr. B Sep 24 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>

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.