CSS 溢出不适用于 salesforce 闪电记录选择器组件

Question

我有一个放在表格内的记录选择器组件。当用户开始输入时，组件会提取匹配的值以供选择。用户输入时显示的列表部分被其下方的元素覆盖。现在如何使列表显示所有值，这意味着该组件应该覆盖在其他元素之上。

这是我的 HTML

<div class="table_component slds-p-around_medium" role="region" tabindex="0">
        <table>
            <thead>
                <tr>
                    <th>Select Parts</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <lightning-layout class="slds-p-around_small" multiple-rows="true">
                            <lightning-layout-item size="12">
                                    <!-- <div class="overflow-on-top"> -->
                                    <lightning-record-picker placeholder="Search Parts" variant="label-hidden"
                                        label="Select Part" object-api-name="Product2" matching-info={matchingInfo}
                                        display-info={displayInfo} filter={filter}
                                        onchange={handlePartPicker}></lightning-record-picker>
                                </div>
                                <lightning-layout class="slds-m-top_small">
                                    <lightning-layout-item size="4">
                                        <lightning-input placeholder="Quantity" variant="label-hidden" type="number"
                                            min="1" max="9999" name="quantity"
                                            onchange={handleQuantityInputChange}></lightning-input>
                                    </lightning-layout-item>
                                    <lightning-layout-item size="4">
                                        <lightning-input class="slds-p-left_x-small" placeholder="Unit Price"
                                            variant="label-hidden" type="currency" min="1" max="9999" name="unitPrice"
                                            onchange={handleUnitPriceInputChange}></lightning-input>
                                    </lightning-layout-item>
                                    <lightning-layout-item size="4">
                                        <div class="slds-float_right">
                                            <lightning-button label="Add Part" variant="brand"
                                                onclick={handleAddPart}></lightning-button>
                                        </div>
                                    </lightning-layout-item>
                                </lightning-layout>
                            </lightning-layout-item>
                        </lightning-layout>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>

这是 CSS -

.table_component {
    overflow: auto;
    width: 100%;
}

.table_component table {
    border: 1px solid #dededf;
    height: 100%;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 1px;
    text-align: left;
}

.table_component caption {
    caption-side: top;
    text-align: left;
}

.table_component th {
    border: 1px solid #dededf;
    background-color: #eceff1;
    color: #000000;
    padding: 5px;
}

.table_component td {
    border: 1px solid #dededf;
    background-color: #ffffff;
    color: #000000;
    padding: 5px;
}

.custom-row {
    height: 5px; /* Adjust this value to change the height of the rows */
}

.picker-wrapper {
    position: absolute;
}

.overflow-on-top {
    position: relative;
    z-index: 9999; /* Adjust this value to change the stack order */
}

Answer 1

您可以使用：

在

.overflow-on-top

中，您可以直接使用

!important

关键字，这将使该属性变得重要，并将覆盖默认位置属性。

或

您可以使用以下代码：

    :host ::ng-deep lightning-record-picker.slds-dropdown-trigger.slds-dropdown-trigger_click{
    position: absolute !important;
    z-index: 9999;
}

这里，

1. :host ::ng-deep

   针对主机组件和任何子组件。

2. lightning-record-picker.slds-dropdown-trigger.slds-dropdown-trigger_click

   专门针对下拉列表。

3. position: absolute !important;

   确保下拉列表绝对定位。

4. z-index: 9999;

   设置高 z-index 以确保下拉列表出现在其他元素上方。