I am trying to swap out modals that were once pure LDS to the new native ones and I am having an issue with styling.
My Modal Component:
<template>
<lightning-modal-header label="Edit Case"></lightning-modal-header>
<lightning-modal-body>
<lightning-combobox
name="subCategory"
label="Sub Category"
value="{selectedSubCategory}"
placeholder="Select a Sub Category"
options="{subCategoryOptions}"
onchange="{handleSubCategoryChange}"
disabled="{subCategoryDisabled}"
></lightning-combobox>
</lightning-modal-body>
<lightning-modal-footer> </lightning-modal-footer>
</template>
The picklist options of my combobox are not overflowing outside of the modal, which causes it to be within the modal body.
In the LDS version, we have full control over the styling and can add overflow to the modal body content.
It seems like now since the native modal is using a component for <lightning-modal-body>
it isn't reachable with css due to shadow dom limits.
I saw here that the modal-body component accepts a class
param, but I am still having trouble targeting it with css to allow for overflow.
Example Image:
In this picture, the dropdown is within the modal body container causing me to have to scroll to see the options. Desired would be the options overflowing outside of the modal.
I tried using dropdown-alignment="auto"
on the combo box, but that forces the picklists to display above the box wherever it can find the room. If the picklist has many options, those are then cut off by the top of the modal.
Is this fixable or is the shadowdom going to prevent me from addressing this, forcing me to go back to LDS?
UPDATE:
I found a solution to this which seems to be working. Instead of using the lightning-modal-body
component which is just slotting the content in, I replaced it with a div using the slds class. This allows me to add my own class to it, and since it's now within my component, I can target it for the overflow.
<template>
<lightning-modal-header label="Edit Case Classification"></lightning-modal-header>
<!-- Before -->
<lightning-modal-body>
<lightning-combobox></lightning-combobox>
</lightning-modal-body>
<!-- /Before -->
<!-- After -->
<div class="slds-modal__content slds-p-around_medium overflowModal" id="modal-content-case-classification">
<lightning-combobox></lightning-combobox>
</div>
<!-- /After -->
<lightning-modal-footer>
</lightning-modal-footer>
</template>
// CSS
.overflowModal {
overflow: visible;
}