Sunday, November 21, 2010

Putting Children in their Place

Of course by “children” I am referring to child regions in APEX and by “place” I mean side by side – I’m sure you all assumed as much. Smile 

The ability to nest regions by establishing parent/child relationships came as a feature of APEX 4.0. Although seemingly small when compared to some of the other features introduced with that release, it’s a feature that should not be overlooked as it allows for complex layouts without the previous complexity.

When you first start working with nested regions, you may notice that sub regions tend to stack on top of each other rather than side by side. This is simply the default nature of the HTML being used. But ultimately you can control how this works – you need only learn about CSS floats and how to implement them in APEX!

Although I often refer people to for simple tutorials, the best tutorial I’ve found to date on CSS floats can be found here: (make sure to check out tutorial 8).

Also note this odd behavior as we’ll need to account for it:

Ok, now that you’ve armed yourself with a thorough understanding of what’s involved, you can put it to use in APEX by setting some style rules for the region via the Region Attributes. Have a look at a demo here using the new theme 21 – Scarlet.


  1. Hi Dan

    I completely agree, region nesting is a great new enhancement in 4.0.

    Here's a good piece of javascript for anynone who wants to get the div's to display in equal heights whilst floating side by side.

    Or for a CSS method you can look at or


  2. You could also try the Masonry Plugin for jQuery.

    Very nice lugin to autoformat a page with many child regions.

    Best regards,

  3. I have a hide-show region as a child of an html region and in the hide-show region I have 2 chart regions. The customer wants the charts side-by-side. I did what you said in the demo but it did not work. They still display vertically. Do I need to go through all of the trouble of creating a new template and include regions side by side or can I do something easy like you have shown?


  4. Thomas,

    Please contact me via email...


  5. I have the same problem as THomas, any idea to solve this?

  6. Anonymous,

    The best solution I've found for this is creating extra regions around the sub-regions to layout an HTML table. It would look like:

    sub-region1: start table, tr, td
    sub-region2: first actual sub-region
    sub-region3: end td, start new td
    sub-region4: second acutal sub-region
    sub-region5: end td, tr, table

    The sub-regions used for the table should not have a region template.


  7. Hi Dan,
    Your solutions works perfectly for 2 subregions, but I have 4 subregions.
    The customer wants 2 subregions one below the other on first column and 2 more subregions one below the other on second column.

    Please help


  8. Hi Chan,

    You'll need to add additional sub-regions to create a basic HTML table around the real subregions. For example, the first subregion would start a table, tr, and td. After that you would put the real subregion. Then the next would close the td and start a new one.

    Each of these subregions that created the table should be basic HTML regions that don't use a template.


  9. Thanks for your article. I see that you have used scarlet theme in your demo application at

    I am not able to see that theme when I choose to create a theme from repository in my Apex installation ( Please let me know starting which build it was made available OR if I can somehow get that them into my installation.


  10. Srini,

    I'm not sure about your question. Could you please send me an email?