Creating a mobile app with APEX - Part 11: Displaying form items side by side

After delivering two new presentations at Apex World 2021 and hROUG Conference 2021, I have enough material for a few extra blogposts on mobile development with APEX. I will start with displaying form items side by side on an APEX smartphone app. 

Description of the challenge

Normally all form items will be placed underneath each other in a form on a smartphone:

To save valuable screen estate, or to group two logically connected items, sometimes we would like to have two items on the same line. 

APEX has the possibility to place form items side by side by disabling the Start New Row attribute for the second item:

On the desktop the result will look like this:

This does not work when the width of the page is less than 640 px, i.e. on most mobile devices, Commission will be placed on a new line:

Analysis

This behavior is caused by CSS. A media query aimed at screens with a width smaller than 640 pixels, determines that the width of the items is 100%. This way no more than one item fits on one row. 

Solution

So we need to overrule this CSS. For this we can define this snippet of CSS on the page:

@media (max-width: 640px) {
    .col.side_by_side {
        width: 50%;
        float: left;
        clear: none;
    }
}

This CSS sets the width of the item to 50% instead of 100%, and applies float:left.

The two items that are supposed to be on one line, should both receive the class side_by_side and the second item should have the property Start new row unchecked:

If you do not want both items to take up half of the row, you can change the width in the Column Attributes. Just make sure that the total width does not exceed 100%, otherwise the items will again be placed underneath each other. 

The result of these definitions looks for the columns Salary and Commission looks like:

Happy APEXing!