APEX: How to automatically adjust item width when showing/hiding items?

Question

I'm building an application in Oracle APEX, and I'm running into a design problem.

I have a region with a dozen shuttles in a single row, and I need to show only 2 or 3 of them at any given time, based on the selection made in another drop-down list item.

To demonstrate the problem, and for testing, I built a brand new empty page to test with.
On this page, I created a Select-List item, which returns the number of shuttles to be displayed.

Then I created dynamic actions to show only the number of shuttles selected, and hide the rest.
So when the user changes the selection to a smaller number, some of the shuttles should be hidden in the browser, with no need to submit or refresh the page.

The dynamic actions work great, and hide the shuttles as expected.
However, the shuttles don't expand to fill the row.

This is a major problem, since the shuttles need more horizontal space in order to be usable.
When I hide the extra shuttles, I need the remaining shuttles to expand and fill the horizontal space in the row.

All of the shuttles are configured with Automatic column and colum-span options.

How do I make the shuttles expand to fill the horizontal space in the row, when I hide most of the other shuttles?
Could I re-render the items using a JavaScript dynamic action?

user_9390796 · Answer

Well i don't know an easy way to do it but you can try this:

The apex template is divided into 12 parts, so each item has its column span defined as a css class in its div container. You just need to change the class for the item to expand.

The class you can use is from col-1 to col-12

The javascript you should use in your dynamic action should be something similar:

$( "#P_ITEM" ).parent().removeClass( "col-2" );
$( "#P_ITEM" ).parent().addClass( "col-6" );

this is an example of the html where the item is located:

APEX: How to automatically adjust item width when showing/hiding items?

1 Answers