Auto-Adjusting Layouts When Hiding Items, Buttons, or Regions

When working in Oracle APEX, it's common to hide or show items, buttons, or even entire regions based on end-user privileges, settings, or conditional logic.

However, there’s one annoying problem:

When an item or button is hidden, a blank space remains in the layout.

This becomes visually awkward, especially when the first item in a row is hidden — leaving your UI looking broken and unbalanced.

In this article, I’ll show you a simple, reusable CSS solution to make your Oracle APEX layouts flexible. Once implemented, your buttons, items, and regions will auto-rearrange themselves to fill empty spaces whenever something is hidden.

🎯 The Problem

By default, when you hide items/buttons/regions in Oracle APEX, the hidden components still occupy space in the layout.
For example, if you have four buttons in a row and you hide the first one, the rest don’t shift left — they stay in place, leaving a blank gap.

This can make your user interface look unpolished.

✅ The Solution

Step 1 — Add Flex Classes to the Parent Container

1. Create a Static Content region, set Template to Blank with Attribute (No Grid)

2. Go to Appearance → CSS Classes, add the following classes:

    u-flex u-flex-wrap
   

   • u-flex → Enables flex layout.

   • u-flex-wrap → Ensures elements wrap automatically when needed.

Step 2 — Use Custom Column Classes

Depending on how many items/buttons you want in a single row, choose one of the following classes:

Example
If you want 3 items per row, just add:

u-flex u-flex-wrap u-flex-col3

Now, when you hide any item/button, the remaining ones shift automatically without leaving a gap.

🧩 Complete CSS Code

Add the following CSS to your Theme Roller → CSS or Inline CSS section:

/* ======================
   FLEX COLUMN LAYOUTS
   ====================== */

/* Single column (full width) */
.u-flex-col1 > * {
  flex: 0 0 100%;
  max-width: 100%;
}

/* 2 columns */
.u-flex-col2 > * {
  flex: 0 0 calc(50% - 1rem);
  max-width: calc(50% - 1rem);
}

/* 3 columns */
.u-flex-col3 > * {
  flex: 0 0 calc(33.333% - 1rem);
  max-width: calc(33.333% - 1rem);
}

/* 4 columns */
.u-flex-col4 > * {
  flex: 0 0 calc(25% - 1rem);
  max-width: calc(25% - 1rem);
}

/* 5 columns */
.u-flex-col5 > * {
  flex: 0 0 calc(20% - 1rem);
  max-width: calc(20% - 1rem);
}

/* 6 columns */
.u-flex-col6 > * {
  flex: 0 0 calc(16.666% - 1rem);
  max-width: calc(16.666% - 1rem);
}

/* 7 columns */
.u-flex-col7 > * {
  flex: 0 0 calc(14.285% - 1rem);
  max-width: calc(14.285% - 1rem);
}

/* 8 columns */
.u-flex-col8 > * {
  flex: 0 0 calc(12.5% - 1rem);
  max-width: calc(12.5% - 1rem);
}

/* 9 columns */
.u-flex-col9 > * {
  flex: 0 0 calc(11.111% - 1rem);
  max-width: calc(11.111% - 1rem);
}

/* 10 columns */
.u-flex-col10 > * {
  flex: 0 0 calc(10% - 1rem);
  max-width: calc(10% - 1rem);
}

/* 11 columns */
.u-flex-col11 > * {
  flex: 0 0 calc(9.090% - 1rem);
  max-width: calc(9.090% - 1rem);
}

/* 12 columns */
.u-flex-col12 > * {
  flex: 0 0 calc(8.333% - 1rem);
  max-width: calc(8.333% - 1rem);
}

/* ======================
   RESPONSIVE BREAKPOINTS
   ====================== */

/* Large tablets and small laptops */
@media (max-width: 1024px) {
  .u-flex-col2 > *,
  .u-flex-col3 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .u-flex-col4 > *,
  .u-flex-col5 > *,
  .u-flex-col6 > * {
    flex: 0 0 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }

  .u-flex-col7 > *,
  .u-flex-col8 > *,
  .u-flex-col9 > * {
    flex: 0 0 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
  }

  .u-flex-col10 > *,
  .u-flex-col11 > *,
  .u-flex-col12 > * {
    flex: 0 0 calc(25% - 1rem);
    max-width: calc(25% - 1rem);
  }
}

/* Tablets */
@media (max-width: 768px) {
  .u-flex-col2 > *,
  .u-flex-col3 > *,
  .u-flex-col4 > *,
  .u-flex-col5 > *,
  .u-flex-col6 > *,
  .u-flex-col7 > *,
  .u-flex-col8 > *,
  .u-flex-col9 > *,
  .u-flex-col10 > *,
  .u-flex-col11 > *,
  .u-flex-col12 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Small tablets */
@media (max-width: 767.98px) {
  .u-flex-col2 > *,
  .u-flex-col3 > *,
  .u-flex-col4 > *,
  .u-flex-col5 > *,
  .u-flex-col6 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .u-flex-col7 > *,
  .u-flex-col8 > *,
  .u-flex-col9 > * {
    flex: 0 0 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }

  .u-flex-col10 > *,
  .u-flex-col11 > *,
  .u-flex-col12 > * {
    flex: 0 0 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
  }
}

/* Mobile devices */
@media (max-width: 575.98px) {
  .u-flex-col2 > *,
  .u-flex-col3 > *,
  .u-flex-col4 > *,
  .u-flex-col5 > *,
  .u-flex-col6 > *,
  .u-flex-col7 > *,
  .u-flex-col8 > *,
  .u-flex-col9 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .u-flex-col10 > *,
  .u-flex-col11 > *,
  .u-flex-col12 > * {
    flex: 0 0 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}

🎨 Demo Example

Let’s say you have twelve items in a row:

Now, if you hide Item 2, Item 4, Item 7 and Item 11, the remaining items will auto-adjust and fill the empty spaces without breaking the layout.

🚀 Key Benefits

• ✅ No more awkward blank spaces

• ✅ Flexible layouts for buttons, items, and regions

• ✅ Works with Oracle APEX Theme 42/Universal Theme

• ✅ Fully responsive across all devices

• ✅ Minimal setup, maximum impact

🔚 Final Thoughts

This small enhancement makes your Oracle APEX pages cleaner, smarter, and more dynamic.
Whenever you hide/show items based on user privileges, settings, or conditions, your UI will automatically adjust itself — no more gaps, no more broken layouts.

💬 Please tell me in the comments how useful you find this solution! Your feedback helps me improve and motivates me to share more Oracle APEX tips with the community.