Oracle APEX - Native Equal Height Regions in the Universal Theme

I've realized that I can be a bit of a perfectionist, especially when it comes to working with helper classes in Oracle APEX's Universal Theme.

I encountered a recurring issue that always bothered me, but I discovered it's actually easy to fix using native CSS helper classes.

The challenge occurs when trying to set two or more regions within the same row to have equal heights. Here’s a typical example.

Even though hardcoding heights to a fixed value with CSS can often create more problems than it solves, this can be done easily in APEX. You can do it natively and declaratively by using the standard region template—simply by setting the Body Height attribute under Template Options:

Alternatively, you can use native CSS height helpers in APEX, such as hamount, where amount spans from 10 to 800 in increments of 10.

As mentioned earlier, this solution is not optimal for different screen sizes or when you don't control the amount of content in the regions.

After searching for a better approach, I discovered that this issue can be easily resolved in under 30 seconds by using native CSS classes in the Universal Theme.

To achieve this, we need to treat the element as a flex container and its children as flex items. To do this, set the Column CSS Classes attribute to u-flex for all the regions in the same row under the Layout section.

Next, we need to allow the item to grow to fit the available space. There's already a native class available for this, called u-flex-grow-1, which should be set as the CSS Class in the Appearance section. Again, for all the regions in the row.

This will equalize the heights of all the regions based on the tallest one, regardless of screen size.

Enjoy Life!