Pages

Monday 26 August 2019

Oracle APEX Radio Group null option fix

APEX 5.1 introduced a template option that transformed radio groups into pill buttons.


I love this concept, it makes for a pleasant UI - an easier target for mouse clicks and finger taps.
I liked it so much I tried to do this myself prior to 5.1.

In 18.2 (fixed in 19.1), there's an issue with the way the null option presents for these radio groups - it's not in the same row.


Marko mentions a CSS fix for this problem in his post, but I find it has some side effects.
.apex-item-grid.radio_group{
  display:flex;
}
Stretched items are no longer stretched, and it ignores the Number of Columns attribute.


I went to inspect the generated HTML, and compare it to the 19.1 working solution, expecting to find some difference in CSS, but I quickly realised the null options is just generated in the wrong level on the tree.

You can also test this manually by using the in the browser tool to drag/drop that element to its siblings in the grid-row.


This means the problem can be solved with JavaScript when the page loads.
$('.apex-item-grid > .apex-item-option').each(function(){
  $(this).prependTo($(this).next('.apex-item-grid-row'));
});
This JavaScript identifies any radio options that are immediately below the grid, instead of being within the grid-row. Then for each instance, it moves that element to the next sibling, which is the grid-row.


Using appendTo() will push it to the end of the list.

And this solution honours the stretch option.


Is there a better way?
Other than upgrade to 19.x ;p

References

jQuery Cheatsheet

6 comments:

  1. The better way is to upgrade to 19.1.

    If you don't want to do that, you can always just upgrade to 19.1.

    For those that really can't upgrade, they could always upgrade to 19.1.

    Tim...

    😉

    ReplyDelete
  2. If we think for long enough, perhaps we could upgrade to 19.2?

    ReplyDelete
  3. In Apex 19 it seems that I don't have the option to select "Display as Pill Button" at all, the entire "advanced" section in "template options" is missing. Does someone know how to fix that?

    ReplyDelete
  4. Is this in an existing application? If so, it will only be available if you Verify the application's theme. You should find the option in applications created since 5.1.

    ReplyDelete
  5. Thanks Scott, I was able to find this option, and tried verifying it, but it failed because of a missing parent theme (maybe a theme that was present on the other Apex instance - the application is an import from another Apex installation). We will probably just need to create a new copy of the Universal Theme, and re-customize it, in order to get this functionality back in this application.

    ReplyDelete
  6. That rings a vague bell, but without more detail I'm not sure.

    ReplyDelete