Apex Code Development You need to sign in to do that
Don't have an account?
jaelee125 Dropdown in LWC Screen Action modal get cut off
When you use a drop down in an LWC Screen Action modal in a quick action, the drop down gets cut off when you open it.
There are many people saying to add the following CSS to the LWC component:
Other people were saying to add an empty div with its' height set so the dropdown has enough space to expand. However, all that empty space doesn't make the UI so great.
We could also use css so the content of the modal expands as the dropdown expands. However, the drop down we are using is a custom search component that expands as you type. So the constant flickering of the UI as the modal content changes based on the search result is also not ideal.
Has anyone found an ideal solution to this problem? Ideally the UI should look like this:
There are many people saying to add the following CSS to the LWC component:
.slds-modal__content {
overflow: initial;
}
After debugging, this does not work. In a quick action, your entire lwc component gets wrapped in another parent .slds-modal__content with overflow set to hidden that you cannot style with your lwc component. Other people were saying to add an empty div with its' height set so the dropdown has enough space to expand. However, all that empty space doesn't make the UI so great.
We could also use css so the content of the modal expands as the dropdown expands. However, the drop down we are using is a custom search component that expands as you type. So the constant flickering of the UI as the modal content changes based on the search result is also not ideal.
Has anyone found an ideal solution to this problem? Ideally the UI should look like this:
A user posted a similar question on https://salesforce.stackexchange.com/questions/373395/quick-action-combobox-overflow according to which, adding the below attribute to lightning-combobox in HTML helped
https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox/specification
Related:
https://stackoverflow.com/questions/57223376/lightning-combobox-getting-cut-off
https://salesforce.stackexchange.com/questions/231397/styling-lightningcombobox-drop-down-to-not-hide-inside-modal-and-extend-modal-l
https://css-tricks.com/considerations-styling-modal/
Hope this helps! Thanks