APEX: Как автоматически настроить ширину элемента при отображении / скрытии элементов?

Question

Я создаю приложение в Oracle APEX и сталкиваюсь с проблемой проектирования.

У меня есть область с дюжиной шаттлов в одном ряду, и мне нужно показать только 2 или 3 из них в любой момент времени, на основе выбора, сделанного в другом элементе раскрывающегося списка.

Чтобы продемонстрировать проблему и для тестирования, я создал новую пустую страницу для тестирования.
На этой странице я создал элемент Select-List, который возвращает количество отображаемых шаттлов.

Затем я создал динамические действия c, чтобы показать только количество выбранных шаттлов, и скрыть rest.
Поэтому, когда пользователь меняет выбор на меньшее число, некоторые шаттлы должны быть скрыты в браузере, без необходимости отправлять или обновлять sh страницу.

Динамические действия c прекрасно работают и скрывают шаттлы, как и ожидалось.
Однако шаттлы не расширяются, чтобы заполнить строку.

Это серьезная проблема, так как челнокам нужно больше горизонтальное пространство для использования пригодное для использования .
Когда я скрываю дополнительные шаттлы, мне нужно, чтобы оставшиеся шаттлы расширялись и заполняли горизонтальное пространство в ряду.

Все челноки настроены с Automatic опциями столбцов и столбцов.

Как сделать так, чтобы шаттлы расширялись, чтобы заполнить горизонтальное пространство в строке, когда я скрываю большинство других шаттлов?
Могу ли я перерисовать элементы, используя действие JavaScript dynamici c?

Answer 1

Ну, я не знаю простого способа сделать это, но вы можете попробовать это:

Шаблон апекса разделен на 12 частей, поэтому каждый элемент имеет свой диапазон столбцов, определенный как класс css в своем контейнере div. Вам просто нужно изменить класс для расширения предмета.

Класс, который вы можете использовать, от col-1 до col-12

javascript, который вы должны использовать в своей динамике c действие должно быть примерно таким же:

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

Это пример html, где находится предмет: