Lookup dropdown cutting under container panel

[nallapusa]

We have limited space under the lookup component, after 3 values display the dropdown is cutting into the parent panel and additional values are hidden(Sceenshot attached). I tried a few things with CSS but nothing worked. Any of the below would work, but I don't know how to do it, any help will be greatly appreciated.

1. Ability to make dropdown to show the complete list values without cutting.
2. Or ability to show just 3 values in the dropdown list

Thank you

[pozil]

Hi @nallapusa, this looks like a SLDS bug so I'm not sure that I can fix it properly. Can you give me more information about the parent container so that I try to can reproduce?

In the meantime and as a workaround, you can limit the number of results by modifying the SOSL LIMIT clause in the Apex search controller.

[nallapusa]

hi @pozil , Thanks a lot for your response. The container is LWC lightning-card.

Unfortunately, applying limit is not an option for us.

[pozil]

@nallapusa I can't reproduce the issue with lightning-card. The sample app for the lookup already uses a card and as you can see the lookup result list expands above the card border:

Can you provide some detailed steps and/or code so that I can reproduce?

[pozil]

Thanks @scgirl107, I'm able to reproduce the issue with a lightning-quick-action-panel.

I've spent a significant amount of time investigating this issue and I came to the conclusion that the bug is in the SLDS framework itself so I cannot fix it in the lookup. In short, the overflow of the quick action's body is not playing nice with the lookup's listbox. I will raise this to the SLDS team but it may take a while to fix.

In the meantime, I can suggest a new workaround: wrap the lookup with a div with a style="min-height: 18rem;" attribute. This will force some white space below the lookup so that it can expand its listbox.
It's not an ideal solution but will work while we wait for an SLDS fix.

[scgirl107]

@pozil I came across a fix for this issue when using the lookup as a custom data type in a lightning datatable. Thanks to @bharvie for his suggestion to use wrapText:true. Hope this helps someone.

Quick update: switched to using joelbyrd's suggestion to use an external stylesheet.

salesforce/lwc#1488