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 w3schools.com for simple tutorials, the best tutorial I’ve found to date on CSS floats can be found here:
http://css.maxdesign.com.au/floatutorial/ (make sure to check out tutorial 8).

Also note this odd behavior as we’ll need to account for it:
http://www.quirksmode.org/css/clearing.html

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.
http://apex.oracle.com/pls/apex/f?p=22073:1

Post a Comment