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:
However, all attempts had produced a page that looked like this:
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:
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.