The Universal Theme, which was introduced in APEX 5.0, has some really nice features. One of the coolest is that it’s responsive–no matter what size window you’re using, the pages should look decent and be fully functional. (Side note: back when I was in college, many websites proudly bore banners declaring that they were designed to be viewed at specific resolutions; if you were using some other size window, they often didn’t look very good. I’ve never understand why anyone ever thought that was a good idea.)
The way this works is through what’s called the “grid” system, where (basically) the page is divided into twelve more-or-less equal columns. If the window is too narrow, some of the columns will automatically stack on top of each other. There’s a fair amount of behind-the-scenes magic, but the vast majority of the time, you won’t need to worry about it.
Of course, that phrase–“the vast majority of the time”–does mean that there will be some times where you do, in fact, need to worry about it. If you decide to have multiple items on the same row, you’re likely to run into an error that says something like:
Label of Page Item P1_TEXT_1 cannot be rendered as the label column span grid setting for this page item is invalid. It is set to be displayed with a Label Column Span of 3. This is not supported as the page item itself only has 3 Column(s)available.
Contact your application administrator.
Let me be honest: I don’t like this error, or this error message. I don’t think it’s very friendly or clear. There’s nothing in Page Designer or Component View to indicate that you have a problem, and the message doesn’t really tell you what the problem is–or how to fix it.
Remember how I said that the Universal Theme uses a twelve column grid? That’s what causes this error. Every page item uses a certain number of columns for its label and for the item itself; by default, the Universal Theme uses three columns for the label, and one for the item. So if you have three items in a row, you’re fine (the labels use a total of nine columns, and the items another three, for a total of 12), but if you try to put a fourth item on the row, you get the error. (Side note: Hidden labels still take up columns, which helps ensure that items line up properly.)
Once you run into the error, there are several ways to fix it:
- The easiest, of course, is to just not put so many items on the same row, but sometimes that’s just not an option.
- You can put the item labels above their respective items by using the Optional – Above or Required – Above label templates; this gets rid of the three columns reserved for the label. Alternatively, you may be able to set your region’s template options to have the Label Position as Show Form Labels Above; this will, of course, affect all items in the region, but if that works for you, it’s easier than editing each item individually.
- You can also manually adjust how many columns the label and/or item uses by adjusting the Label Column Span and Column Span attributes (respectively); these are in the Grid section of the Page Designer.
- It’s also possible to change the number of columns used by default by changing the page template, but this won’t work if you’re using the Universal Theme subscribed to the Theme Repository, which I recommend (since you’ll automatically get any fixes we release in new versions of APEX). And, of course, this would impact all of the page items throughout your application, and is likely to cause issues on pages you’re not intending to change.
Depending on your situation, I’d suggest that the second or third options are likely to be best.