I am working on a LWC that contain a data table. My data table beiing with a large number of columns, I decided to enable the class slds-scrollable which now contain the table within the div Have a look: enter image description here

In my component I have an edit mode, that when clicked replace the fields with combobox.

My issue as you can see in the picture is that the combox when click is not really visible. Because the slds-scrollable add a paramerer of overflow Hidden so I cannot see it.

If I change it to overflow Visible then the combobox is visible but on scroll ONLY have a look:

enter image description here

if I delete the slds-scrolable then my table go outside of the div .. but the combobox is behaving alright with overflow visible

enter image description here

Please help me !! How can I have my table scrolable on X within my div and in the same time having my combobox behaving in the right way with overflow visible

Thx you

1 Answer 1


I had a similar issue regarding having dropdowns being funky with limited space. My work around was to just add blank divs like the one I provided below, that way it had more room to work with. I know your example is just 2 instances on the table but on whatever it is sitting on I recommend adding it to see if it fits what you're looking for. For more room to work with you could add more.

<div class="slds-transition-hide">
      <p>content here</p>
  • 1
    It is not what I am looking for ;(
    – Ben2pop
    Jun 28, 2021 at 6:31

You must log in to answer this question.

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