Problems with page layout in Oracle Apex

Question

I'm trying to solve a formatting issue I'm having with Oracle Apex. Overall, this is a fantastic tool for whipping up proof-of-concept type applications, but whenever it comes to "prettying up" a page, it seems to be very difficult to work around.

I have a simple form-based page based on a table. However, I'd like to do a few simple things like group certain fields together on the form (phone info), perhaps throw an image in etc. I can't see any way to do either of these things inside a form. For example, here is an example page

and here are the small changes I want to make (photoshopped):

What the heck am I missing here? I can't seem to add anything except database fields inside the form to visually change things.

Any help appreciated.

Answer 1

It can be done - see this demo (I took the liberty of copying your icon, hope you don't mind). It looks like this:

How it was done

1) I uploaded the image into Apex. (Alternatively it can be hosted elsewhere).

2) I created a page item of type "Display Image" with attributes as follows:

Note the use of rowspan=3 in two places (circled in yellow), to make the picture and its (blank) label occupy 3 rows of the HTML table Apex uses for layout.

3) I created a page item of type "Stop and start table" and put it after the Mailing Address item. This prevents the phone icon taking up the same horizontal space as the name and mailing address, resulting in phone items being pushed too far to the right.

4) I set the "Begin on new line" property of the first phone item to "No" so that it appears to the right of the icon. The remaining phone items have "Yes" so that they appear below the first.