Resizing cells with drag & drop in Form Builder

In Orbeon Forms 2017.2, in Form Builder, we started using a web technology called CSS grid layout. This gave us a modern and solid foundation to implement new grid-related features in Form Builder. We already leveraged that new foundation in Orbeon Forms 2017.2 to switch to a 12-column layout.

We took this one step further in Orbeon Forms 2018.1 allowing form authors to change the size of the cells with drag & drop. This is simply done by grabbing the border of a cell, and dropping it in one of the possible destinations, which while dragging are indicated by an orange bar. For instance, here we make the size of the Middle name slightly smaller, to leave more space for the Last name:


And this works in both directions: you can resize cells to make them wider or narrower, as shown above, but also to make them taller or shorter. For more on this, see the documentation on the 12-column layout.