How to persist the Column Layout on Small Devices in #orclAPEX

We spend a lot of time designing the layout of our APEX pages. Whether it’s sizing or aligning regions, items or buttons, the 12 column grid layout helps us achieve almost anything we want.

It turns out, however, that on mobile devices or small screens, all of that work goes out the window, as all regions and items by default fall under each other and take the full width of the screen.

More often than not, this result is actually desired as it allows for easy navigation and interaction, and for the elements not to be too cramped up. There are, however:

Times when automatic resizing is not desired

• If you have a long form with a large number of input fields, on mobile devices the user will be forced to scroll much more and perhaps lose context.
• There’s no reason for related form fields such as “Date From” and “Date To” not to be next to each other, even on small devices.
• With the introduction of the Floating Label template, page items are much bulkier to begin with, so stacking them up takes up a lot of screen real estate.

The solution – Column Modifier Classes

Luckily, there’s something called “Column Modifier Classes”. They are documented in the Universal Theme sample app here.

	≤640px	640 and <768px	≥768px and <992px	≥992px and <1200px	≥1200px
Class prefix	.col-xxs-	.col-xs-	.col-sm-	.col-md-	.col-lg-

What they are

These classes exist to fine tune the column layout based on screen size, overruling whatever column-span we initially provided for our elements, in a specific screen width range. Normally to achieve something like this we would have to write our own CSS media queries, but this way we add 1 class and call it a day.

Where to use them

Wherever you see “Column CSS Classes” in the builder, that’s where these go. (Don’t forget to remove the preceding dot from the class name)

How to use them

Say, for whatever reason, you wish a specific region to only take up 8 columns, as opposed to the default 12 on large devices. Perhaps sometimes the app runs on big conference screens or info screens and the region just seems too big. We can simply add col-lg-8 to that region’s Column CSS Classes attribute, and if the screen is wider than 1200px, the region will only take up 8 columns.

Finally, the fix for our mobile device problem

Say we have a Date From and a Date To form field next to each other, each taking 6 columns. When the screen is smaller or equal to 640px, they would naturally stack up and take the full width of the screen. In this case, we can give both of them class col-xxs-6, causing their proportions to persist, no matter the screen size.

Final words

The Universal Theme is full of such helper classes. Do you want an element to be hidden when the screen is under 768px wide? There’s a class for that: hidden-xs-down. Do you want an element’s width to ever be at most 700px? There’s a class for that: mxw700. For more such goodies, check out the Reference Section of the Universal Theme sample app.