I have a Styling issue that I do not know how to solve..

I have to child LWC within a parent component Each child component is a Data Table with an edit feature which give the ability to edit the data within the table

since some field are picklists it cause trouble when there a not a lot of rows in my table Have a look at the gif.

Part of the code:

<div class="slds-scrollable_x  slds-var-m-left_x-small" style="height:100%">
                <table class="slds-table slds-table--edit slds-table--bordered slds-table_cell-buffer" style="table-layout:fixed;" >
                        <tr class="">
                            <th class="columnsize" scope="col">
                                <div class="slds-truncate" title="Name">Name</div>
                            <th class="columnsize" scope="col">
                                <div class="slds-truncate" title="Stage">Stage</div>
                            <th class="columnsize" scope="col">
                                <div class="slds-truncate" title="Deal type">Deal Type</div>

What would be the ideal way to display the picklist properly

enter image description here

1 Answer 1


Regarding first thing, I'm not sure, because I can't see your html, but I'd guess you have z-index on second table, remove it and it should fix it.

Regarding second issue add overflow: visible so your picklist will should either way

  • Hi Thx you for your answer.
    – Ben2pop
    Commented Jun 13, 2021 at 7:47
  • did it work for you?
    – ytiq
    Commented Jun 13, 2021 at 13:15
  • Hi Ytiq. I tried it. My issue is with a class I am using which is slds-scrollable. my component needs to allow scrolable-x but not Y. I added part of my code
    – Ben2pop
    Commented Jun 27, 2021 at 11:29
  • I tried slds-scrollable_y_none but it does not exist
    – Ben2pop
    Commented Jun 27, 2021 at 11:30

You must log in to answer this question.

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