I have a Radio group and depending on the value selected, I want a specific region to appear and make 2 other regions disappear.

However when I hide the regions, the region that is visible doesn't take all the space available which leaves an empty space.

Like this

I was using the $x_Hide('ItemID') method like a website suggested but it doesn't collapse the space like the page claimed.

I've noticed that the x_Hide doesn't actually remove the div where the region was.

The div is still present and its content is too.

I then tried the $x("ItemID").remove() function but this time the div was still there but its content was missing.

Is there a way to make it so that the remaining region takes all the available space?

I have a Radio group and depending on the value selected, I want a specific region to appear and make 2 other regions disappear.

However when I hide the regions, the region that is visible doesn't take all the space available which leaves an empty space.

Like this

I was using the $x_Hide('ItemID') method like a website suggested but it doesn't collapse the space like the page claimed.

I've noticed that the x_Hide doesn't actually remove the div where the region was.

The div is still present and its content is too.

I then tried the $x("ItemID").remove() function but this time the div was still there but its content was missing.

Is there a way to make it so that the remaining region takes all the available space?

• javascript
• jquery
• oracle-database
• oracle-apex

2 Answers 2

I always make use of built-in Apex functionalities whenever possible. However, if I run into quirky behavior, my last resort would be a custom JS/JQuery solution. So below is an alternative.

By making use of the JQuery library that ships with Apex, you can do the following:

1) Add a static ID to your target region;

2) Then just create a JQuery function that will hide this region:

function hideRegion(ID) {
    $(ID).hide();
}

Place this code either in your external JS file, or your page-level (or inline) JS (the "Global Variable Declarations.." portion).

3) Then you can call (or execute) this function like so:

hideRegion('#the-static-id');

note: place this inside of whatever dynamic action you're triggering to hide the region.

4) Then to show it again, create the JQuery function:

function showRegion(ID) {
    $(ID).show();
}

Place this code either in your external JS file, or your page-level (or inline) JS (the "Global Variable Declarations.." portion).

3) Then you can just call this function like so:

showRegion('#the-static-id');

Now place this inside of whatever dynamic action you're triggering to show the region again.

Why this should work

The .hide() action is quite similar to making the target div have a display:none property in CSS. As such, the other regions should take up the space that was left by the region you hid through the function above. Meanwhile, .show() reverts it to its original display style.

Hope this helps!

UI design of APEX is responsive out of the box. All you will need is to get the handle of right region and hide it. The effect that you are looking for will get applied if done right. In case you are having difficulties locating appropriate regions using javascript then other simpler solution would be to use Dynamic Actions feature and would be go to option if you are just beginning with APEX. Dynamic actions provide a way to define plex client-side behavior declaratively without the need for JavaScript.

Refer Oracle Docs for more info on Dynamic Actions --> link