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

Posted by at

10 comments:

  1. mnolanNovember 22, 2010 at 2:13 AM

    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.

    http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

    Or for a CSS method you can look at http://www.alistapart.com/articles/holygrail or http://www.alistapart.com/articles/fauxcolumns/

    Cheers
    Matt

    ReplyDelete
  2. DGriesserNovember 23, 2010 at 4:30 AM

    You could also try the Masonry Plugin for jQuery.

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

    http://desandro.com/resources/jquery-masonry/

    Best regards,
    DGriesser

    ReplyDelete
  3. UnknownJanuary 22, 2011 at 11:06 AM

    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?

    Thanks:)

    ReplyDelete
  4. Dan McGhanJanuary 22, 2011 at 11:08 AM

    Thomas,

    Please contact me via email...

    Regards,
    Dan

    ReplyDelete
  5. AnonymousOctober 19, 2011 at 10:14 AM

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

    ReplyDelete
  6. Dan McGhanOctober 19, 2011 at 11:24 AM

    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:

    main-region:
    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.

    Regards,
    Dan

    ReplyDelete
  7. AnonymousNovember 16, 2011 at 11:21 AM

    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

    Thanks
    Chan

    ReplyDelete
  8. Dan McGhanNovember 16, 2011 at 11:59 AM

    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.

    Regards,
    Dan

    ReplyDelete
  9. AnonymousMarch 4, 2012 at 3:31 AM

    Thanks for your article. I see that you have used scarlet theme in your demo application at http://apex.oracle.com/pls/apex/f?p=22073:1.

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

    Thanks,
    Srini

    ReplyDelete
  10. Dan McGhanMarch 5, 2012 at 9:07 AM

    Srini,

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

    Regards,
    Dan

    ReplyDelete

Subscribe to: Post Comments (Atom)