Skip to Main Content

Display:flex is causing element to disappear in dialog box in google chrome

User_LODA2Nov 23 2021

I have created an application using Oracle APEX. It is working fine in all browsers without any issues. Recently, I have noticed that in one of the model/dialog box page, HTML elements like input box, select list disappears when clicked on it and reappear when I move to next item. This is not happening in the MS Edge or IE. Also, this happens only If I open this page in a dialog box. It will work perfectly if I open it as a page.
Once I looked into this, I found that wrapper div has display as flex. If I remove or change it to block using console, it is working fine. Since for each item, oracle apex create a item wrapper, this property is coming as default. I can change it using custom css but I am curious as why this is happening. It was working perfectly some time back and suddenly it is behaving like this. I can reproduce the same issue on other computers as well.
Is it the issue with chrome or do I need to make any other changes?

Page open with display as flex:
Changes display to block:
Picture2.pngText box is visible now:

Post Details
Added on Nov 23 2021
1 comment