2

My question is similar to this, I have a custom dropdown column which is appearing completely fine when we have many rows in the datatable. But in a sitation when we have a single record, it Lightning:datatable custom dropdown list items seem to be appearing behind the LWC datatable's container.

enter image description here

I tried setting min-height, but it did not resolve the issue.

Also tried overriding below,

.slds-dropdown_left, .slds-dropdown--left {
    z-index: 9999;
    position: relative;
}

Didn't help though. Any helpful suggestions to get this dropdown list appear without having to scroll this tiny row. Thank you!

Improve this question
2
  • 1
    This is a known issue because the combobox only has a look-n-feel like dropdown. You might want to replace it with a native select element. You would need to add logic for the selected value. And incase you still want to use the combobox i guess the solution is to set overflow to visible from a static resource. However it still might have few other issues.
    – Sachin Hooda
    Oct 15, 2021 at 17:07
  • 1
    Thank you @SachinHooda, it worked according to your suggestion. Appreciate it.
    – Pasan Eeriyagama
    Oct 18, 2021 at 4:08

1 Answer 1

Reset to default
2

As per @SachinHooda's suggestion in comment, Replaced lwc combobox with with and that fixed the issue.

    <div class="slds-select_container" >
        <select name="peGroup"  value={selectedId} class="slds-select" onchange={handleChange}>
            <template for:each={options} for:item="opt">
               <option key={opt.value} value={opt.value}>{opt.label}</option> 
            </template>
        </select>
    </div>

enter image description here

Improve this answer
1
  • 1
    You can mark it as solved. :)
    – Sachin Hooda
    Oct 18, 2021 at 4:45

You must log in to answer this question.

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