Tuesday, December 12, 2017

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!