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!

  • 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. Oct 15 '21 at 17:07
  • 1
    Thank you @SachinHooda, it worked according to your suggestion. Appreciate it. Oct 18 '21 at 4:08

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> 

enter image description here

  • 1
    You can mark it as solved. :) Oct 18 '21 at 4:45

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.