Don't duplicate your radio items 🧐

A few days ago I've managed to produce a very weird bug that was hard to figure out. Thankfully, it was only in a demo application. I hope this blog post will help somebody to fix it a bit faster.

The problem...

...was that I couldn't click on the second radio group item with label "Accounting".

How I did it

I've created two radio group items. The first one that I've created was P58_RADIO (with label "Radio Group") and the second one was a duplicate of the first one so it was automatically named P58_RADIO_1. After that, I've moved that item before P58_RADIO and suddenly I couldn't click on "Accounting" label of the second radio group item (as shown above).

The problem is how APEX internal engine renders radio group items. This is the code for the radio item named P58_RADIO:

If you take a closer look at input and label HTML tags of radio buttons you can see how APEX is generating the ID and FOR HTML attributes: item name + underscore + sequence (starting from 1). In my case, "Accounting" label had FOR attribute that was equal to the ID of a duplicated item (P58_RADIO_1) and that didn't allow me to click on it.

How to fix it

I don't expect from APEX team to change the way how radio items are rendered so just be careful how you're naming your page items. 

CSS fix for Null Display Value

Also, in APEX 18.2.0.00.12 (and probably in some lower version), there's a UI bug with horizontal radio group items where property "Display Null Value" is turned on. The display value for null values is displayed in a row before other radio group item values. To fix it, use the following CSS:

Enjoy!

Tested in APEX 18.2.0.00.12.

Interactive Grid: How to Fix Blank Toolbar DIV

One of the best functionalities of the Interactive Grid is declarative master-detail option. That's the reason why I like to use them also in readonly mode. Most of the time I don't need toolbar in detail regions so I turn it off (Region Attributes > Toolbar > Show = No).

But, currently (in APEX 5.1.4.00.04 and less) there's little bug that I can't ignore. It's 9px blank div above report headers:

At first I thought that's easy - I'll just use :empty CSS pseudo selector and hide DIV element with CSS class .a-IG-header:

.a-IG-header:empty{
  display:none
}

But that breaks sticky headers when you scroll down. To fix that I had to use different CSS:

.a-IG-header:empty{
  padding:0;
  border-bottom:0
}

If you want to use other regions for master-detail pages take a look at my plugin on apex.world.

Demo is available here.

Tested on apex.oracle.com (v5.1.4.00.04).

Enjoy!