How to Align Regions on a Page

APEX is brilliant at generating nice looking web pages using the supplied templates but sometimes there are layouts that you just can’t get to work. You know that you could layout the page perfectly using html but you just can’t get APEX to generate this html. You could investigate changing the template but for one off occurrences it doesn’t seem worth it.

We had a recent example where we wanted to display two columns of data displaying details of two different people as a comparison. This was to be used if users had entered duplicate records on the system; they could compare the information that had been entered against each existing record and decide what they wanted to do. Down the left hand side of the screen we would list the details about the person (name, date of birth etc.) then beneath this details of the person’s addresses and reviews. Down the right hand side we would list the same information for a different person record. As the information will be different for the two different records we would want all the sections to line up. So, if Person A had 10 addresses and Person B had 1, then the two review sections listed below would still line up. The end result should look something like this:

image1.JPG

However, all attempts had produced a page that looked like this:

image2.JPG

Although this may not look too bad, when we add a number of other sections to the end of the page it becomes unusable. The idea is for users to compare the information recorded against both people. This can’t be done if you have to scroll down to find the relevant information for the other person.

Desperation forced me to post by first query on the Oracle APEX forum, scary :-) I like to work my own problems out but I knew this one was beyond me when I asked the training company we used and even they were stumped. So I have to credit the solution below to Carl Backstrom, thank you Carl.

The solution requires that you create four new custom region templates called Layout Start Table, Layout End Table, Layout Between Cells and Layout Between Rows. The regions should have the following code in the Template Definition section:

Layout Start Table – <div><table border=”0″><tr><td valign=”top”>

Layout End Table – </td></tr></table></div>

Layout Between Cells – </td><td valign=”top”>

Layout Between Rows – </td><tr><td valign=”top”>

Then on your page place an empty HTML region using the Layout Start Table template before the regions that you want to align. Then at the end of all the regions involved create an empty HTML region using the Layout End Table template. Before the left hand regions place an empty HTML region using the Layout Between Rows template and between all other regions create regions using the Layout Between Cells template. For the example shown, the region list for the page will look like this:

image3.JPG

These templates provide a very simple solution to this problem by inserting little bits of HTML code at relevant points so that the regions sit within a HTML table. Beautiful.

Sara

Sara Blair is a freelance Oracle developer with over 10 years Oracle experience. She has been working with Oracle APEX for nearly 4 years since htmldb 1.5, and is available to hire through Silvercore Solutions.

3 Responses to “How to Align Regions on a Page”

  • Thank you for this very useful explanation of how to handle alignment of different region sources. It just saved me for hours trying to re-invent the wheel.

  • Richard says:

    Thank you, Sara! This saved me going insane!

  • Ben says:

    Thank you so very much!!
    We’re new to Apex here and are hating it’s lack of user friendly guidence, your guide is simple and solution elegant.

Comments can no longer be submitted.