Fields Disappear on Focus in Oracle Apex: Chrome Bug

Fields Disappear on Focus in Oracle Apex: Chrome Bug

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.

This tutorial will teach you to resolve the issue "Fields Disappear on Focus in Oracle Apex".

In Oracle Apex 21.1, if you navigate through the fields or focus an item through the mouse, the fields disappear at runtime. Whether it is a Chrom bug or an Oracle Apex bug, I am not sure about it, but you can solve this issue by following these simple steps.

Resolve Fields Disappear Issue on Focus in Oracle Apex

  1. In Oracle Apex, open your application and run.
  2. Click on the Customize > Theme Roller.
  3. Then add the below CSS code in the Custom CSS section:
.apex-item-select,
.apex-item-text,
.apex-item-textarea,
.apex-item-multi {
backface-visibility: hidden;
}

The following is the screenshot:

Oracle Apex on focus item disappear issue solution.

Now save the changes and close the theme roller. This on focus field disappearance issue should be resolved now.

If your theme does not support custom CSS in the theme roller, then follow these steps to add the above CSS.

Add Custom CSS File in Oracle Apex

  • Copy and paste the CSS code mentioned above in a text file and save as custom.css.
  • Then in Oracle Apex, open Shared Components > Static Application Files.
  • Click on the Create File button and upload the custom.css file and click on the Create button.
  • After that copy the Reference path APP_FILES#custom.css.
  • Then go to, Shared Components > User Interface Attribute > Cascading Style Sheets and paste the APP_FILES#custom.css in the text area below.
  • After that, click on the Apply Changes button to save the changes.

The field disappear issue should be resolved now.

I got this solution from the following LinkedIn post:

Related: