APEX_ITEM生成的下拉列表项存在但不可见问题求助

Hey there, let's work through this frustrating issue you're facing—those dropdowns from APEX_ITEM.SELECT_LIST_FROM_QUERY that work functionally but are invisible after upgrading to APEX 19.2 are definitely a head-scratcher, especially since other dropdowns behave normally. Here are targeted fixes and checks to try:

1. Boost Style Priority & Target Dropdown Options #

Your custom zz class might be getting overridden by APEX 19.2's updated default styles, especially in RTL mode. Enhance your CSS to explicitly target both the select element and its options with higher priority:

.zz {
    color: #000 !important; /* Ensure text contrasts with background */
    background-color: #fff !important;
    direction: rtl !important; /* Explicitly enforce RTL behavior */
    z-index: 9999 !important; /* Prevent dropdown from being hidden behind other elements */
}

.zz option {
    color: #000 !important; /* Make sure dropdown options are visible */
    background-color: #fff !important;
}

This fixes cases where text color matched the background, or options weren't inheriting the correct styles.

2. Add Inline Styles Directly to the APEX_ITEM Call #

APEX 19.2 adjusted how form elements inherit theme styles, so adding inline styles directly to your SELECT_LIST_FROM_QUERY can bypass theme conflicts. Modify your SQL like this:

SELECT LEVEL AS item_no, 
APEX_ITEM.SELECT_LIST_FROM_QUERY(
    p_idx => 1,
    p_value => 'Test',
    p_query => 'SELECT DISTINCT LAP_TEST_ENG_NAME FROM LAP_TESTS',
    p_attributes => 'style="color: black; background: white; dir: rtl;"',
    p_class => 'zz'
) AS "Test" 
FROM dual 
CONNECT BY LEVEL <= TO_NUMBER (:P41_HOW_MANY)

Inline styles have higher priority than external CSS, which can cut through unexpected theme defaults.

3. Inspect Generated HTML & Computed Styles #

Right-click the invisible dropdown and select "Inspect" to verify:

• Is the zz class applied directly to the <select> tag? APEX updates sometimes change how classes attach to generated elements.
• In the browser's "Computed" styles tab, check if color and background-color are identical—this would make text invisible.
• Ensure the dropdown isn't clipped by a parent container (check overflow properties) or hidden behind other content.

4. Reinitialize Dynamic Page Items #

APEX 19.2 might not properly initialize dynamically generated APEX_ITEM elements. Add this JavaScript to your page's "Execute when Page Loads" attribute to force initialization:

$(document).ready(function() {
    apex.jQuery('.zz').each(function() {
        if (this.id) {
            apex.widget.initPageItem(this.id);
        }
    });
});

This ensures the dropdowns get the necessary APEX widget bindings and styles applied.

5. Test with a Built-in RTL Theme #

APEX 19.2 updated RTL support, so your custom theme might need adjustments. Temporarily switch to a built-in APEX RTL theme (like Universal Theme with RTL enabled) to see if the dropdowns become visible. If they do, you'll need to update your custom theme to align with 19.2's RTL style hooks.

内容的提问来源于stack exchange，提问作者AboJoe