0

I have a custom reusable lookup dropdown LWC component that I'm using in another parent component, which is then used in a flow screen.

The dropdown hides inside the flow modal content area. I want the dropdown to not be hidden inside the modal.

I tried to override the modal's CSS, but it also seems to not be working.

.THIS .slds-modal__content{
    overflow: initial;
}

Reusable HTML:

<!-- Generic Custom Dropdown with Search LWC -->
<template>
    <div class="slds-form-element">
        <!-- Field Label -->
        <label class={labelClass} for="select-sobject-id">{fieldLabel}</label>
        <!--/ Field Label -->
        <div class="slds-form-element_control">
            <!-- Combobox Container -->
            <div class="slds-combobox_container">
                <div class={dropDownClass} aria-expanded="true" aria-haspopup="listbox" role="combobox">
                    <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
                        <!-- Readonly Input to display selected value -->
                        <input type="text"
                            class="slds-input slds-combobox__input slds-combobox__input-value combobox-input-class"
                            id="select-sobject-id" autocomplete="off" data-id="select-sobject-id"
                            aria-autocomplete="list" aria-controls="listbox-id-11" role="textbox"
                            placeholder={placeholder} title={label} onclick={handleInputClick} value={label} readonly
                            disabled={disabled}></input>
                        <!--/ Readonly Input to display selected value -->

                        <!-- Up Arrow icon div if dropdown open -->
                        <div if:true={isDropdownOpen}>
                            <span
                                class="slds-icon_container slds-icon-utility-up slds-input__icon slds-input__icon_right">
                                <lightning-icon icon-name="utility:up" size="x-small"></lightning-icon>
                            </span>
                        </div>
                        <!--/ Up Arrow icon div if dropdown open -->
                        <!-- Down Arrow icon div if dropdown close -->
                        <div if:false={isDropdownOpen}>
                            <span
                                class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right">
                                <lightning-icon icon-name="utility:down" size="x-small"></lightning-icon>
                            </span>
                        </div>
                        <!--/ Down Arrow icon div if dropdown close -->
                    </div>
                    <!-- List box to show dropdown options -->
                    <div id="listbox-id-11" class="slds-dropdown slds-dropdown_fluid" role="listbox">
                        <ul class="slds-listbox slds-listbox_vertical" role="presentation">
                            <li>
                                <!-- Search input box -->
                                <input type="text" class="slds-input search-input-class" role="textbox"
                                    value={inputValue} onkeyup={handleKeyPress} onblur={closeDropdown}></input>
                            </li>
                        </ul>
                        <ul class="slds-listbox slds-listbox_vertical slds-dropdown_length-5 customClass" tabindex="0"
                            role="presentation">
                            <template for:each={optionsToDisplay} for:item="option">
                                <!-- li to display each option in the list -->
                                <li key={option.value} role="presentation" class="slds-listbox__item"
                                    data-label={option.label} data-value={option.value} onclick={optionsClickHandler}
                                    title={option.label}>
                                    <div id={option.value}
                                        class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small"
                                        role="option">
                                        <span class="slds-media__figure slds-listbox__option-icon"></span>
                                        <span class="slds-truncate">
                                            <span>{option.label}</span>
                                        </span>
                                    </div>
                                </li>
                                <!--/ li to display each option in the list -->
                            </template>
                        </ul>
                    </div>
                    <!--/ List box to show dropdown options -->
                    <div>

                    </div>
                </div>
            </div>
            <!--/ Combobox Container -->
        </div>
    </div>
</template>
<!--/ Generic Custom Dropdown with Search LWC -->

Parent Component HTML:

<template>

    <div class="slds-card" style="font-family: 'Open Sans', sans-serif">

        <!-- Header -->
        <!--
        <header class="slds-card__header slds-media slds-media_center">
            <div class="slds-media__figure">
                <lightning-icon icon-name="standard:account" size="small"></lightning-icon>
            </div>
            <div class="slds-media__body slds-card__header-title slds-text-title_bold" style="font-size: 14px">
                Add Products
            </div>
        </header>
        -->
        <!-- Table -->
        <table class="slds-table slds-table_bordered slds-no-row-hover slds-table_cell-buffer" role="grid">
            <thead>
            <tr>
                <th scope="col" height="22" style="width: 3rem">Nr.</th>
                <th scope="col" height="22">Products</th>
                <th scope="col" height="22">Quantity</th>
                <th scope="col" height="22" style="width: 3rem"></th>
            </tr>
            </thead>
            <tbody>
            <template for:each={listOfOppProdcts} for:item="rec">
                <tr key={rec} class="slds-hint-parent">
                    <td style="font-weight: bold">
                        <lightning-formatted-number value={rec.index}></lightning-formatted-number>.
                    </td>

                    <td>
                        <template if:true={options}>
                            <c-reusable-custom-dropdown-with-search-lwc options={options} value={rec.Product2Id} label={rec.Product2Name} name={rec.index} onchange={handleOnChange}></c-reusable-custom-dropdown-with-search-lwc>
                        </template>
                      
                    </td>

                    <td>
                        <lightning-input type="text" variant="label-hidden" label="" data-id={rec.index} name="Quantity" value={rec.Quantity} onchange={handleInputChange}></lightning-input>
                    </td>

                    <td>
                        <lightning-button-icon icon-name="utility:delete" alternative-text="Remove" title="Remove" name={rec.index} onclick={removeRow}></lightning-button-icon>
                    </td>
                </tr>
            </template>
            </tbody>
        </table>
        <div class="slds-p-left_small slds-p-vertical_small">
            <lightning-button class="slds-p-right_small" variant="destructive" label="delete all rows" title="delete all rows" icon-name="utility:recycle_bin_full" onclick={removeAllRows}></lightning-button>
            <lightning-button variant="neutral" label="add additional row" title="add additional row" icon-name="utility:add" onclick={addNewRow}></lightning-button>
        </div>

        <!-- Footer -->
        
        <footer class="slds-modal__footer" style="padding: 0.50rem 1rem;">
            <lightning-button icon-name="utility:save" variant="brand" label="Add Products" title="Create Opportunity" onclick={createOpportunityProducts}></lightning-button>
        </footer>
        
    </div>

</template>

0

You must log in to answer this question.