2

I'm currently having some issues with the lookup implementation that is being used within a lightning-datatable implementation.

enter image description here

The lookup bar is being cutoff, and instead pushes the entire table segment down and makes it scrollable within the container causing this.

enter image description here

Which would be fine except for the fact that it's not immediately obvious it's happening unless the container itself is being scrolled down.

On the other hand, using the lightning-combobox with the dropdown-alignment='auto' gives me what I wanted. enter image description here

I've been working off of the Lightning Design Systems to create a lookup class - https://www.lightningdesignsystem.com/components/lookups/, so I'm not sure how to properly implement this so that the dropdown from the lookup aligns properly

2
  • When you say alignment, do you mean that your dropdown is being hidden behind the edge of the datatable, but the salesofrce lightning-combobox is being displayed over the top of the edge of the container?
    – Nick C
    Jan 9, 2023 at 22:14
  • Yeah - the combobox has the dropdown-alignment that allows it to escape the datatable, but I'm not sure how to implement that for the lookup
    – Kevin Yao
    Jan 10, 2023 at 15:02

1 Answer 1

-1

Since I wasn't able to find any build in salesforce method to do this, I resolved this by changing the listbox to a fixed position and calculating the position of the input within the window and set the style with that.

It's a bit hacky, but this is what I did to set the style

    setDropdownStyle() {
        let style = "position:fixed; z-index:10000;";
        if (this.template.querySelector("[data-id='lookup-combobox']")) {
            let boundingBox = this.template.querySelector("[data-id='lookup-combobox']").getBoundingClientRect();
            style += `top: ${boundingBox.top+30}px; left: 150px`; 
        }
        this.template.querySelector("[data-id='listbox']").style = style;
    }
1
  • Great that you found a workaround, kudos! Adding relevant code to the answer would be super helpful for future readers. Thanks!
    – Raul
    Jan 13, 2023 at 7:54

You must log in to answer this question.

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