Wednesday, May 23, 2018

The 12-column layout

Since the early days of Form Builder, all form controls are placed within grids. The basic idea of a grid, of course, is to have rows and columns. Until Orbeon Forms 2017.1 included, with Form Builder, each grid could have from 1 to 4 columns [1]. Spanning rows in a grid was possible, but spanning columns was not. This system served Orbeon Forms users well for a long time.

Orbeon Forms 2017.2 made an important change and introduced a 12-column layout [2]. What this means is that instead of varying the number of columns of a grid, you vary how many columns a control spans. So if you previously had a text area taking the entire width of a one-column grid, now you have a control taking 12 columns in that 12-column grid; a 4-column grid translates into a grid with controls each taking 3 columns, and so on.

You might wonder why we picked 12 columns. The answer is simple: the number 12 is divisible by 1, 2, 3, 4 and 6, and it is not “too small” or “too large” [3]. This means that it is possible to be backward-compatible with the previous 1–4 column system but also allows for more flexibility in the placement of controls since the granularity is now 1/12th of the width of the grid [4]. In short, using 12 columns is a good compromise.

Grid Columns
Orbeon Forms 2017.1
Column Span
Orbeon Forms 2017.2
1 12
2 6
3 4
4 3
5 2 [5]
6 2

With Orbeon Forms 2017.2, you can expand, shrink, split and merge cells with icons that show within each cell. And now with the upcoming Orbeon Forms 2018.1, we are enhancing the 12-column layout with drag and drop of cell borders. This means that you can resize a cell to take from 1 to 12 columns, depending on the cell’s location, instead of using icons.

Single grid with flexible layout
Single grid with flexible layout

And, in case you had missed, it, you can also drag and drop controls between cells now since Orbeon Forms 2017.2!

We hope that you will like these changes and the increased flexibility that comes with them!


  1. With the option to extend that number at the risk of having funny-looking layouts.  ↩

  2. The 12-column layout applies to wider displays. For narrow displays like phones in portrait mode, each field shows on a single row. In the future, we can imagine separate configurations for other displays widths.  ↩

  3. Bootstrap grids use a 12-column system as well.  ↩

  4. Form Builder and Form Runner required major changes for this to happen.  ↩

  5. 5 is not a divisor of 12, and so such rarely-used grid widths convert to 10-out-of–12 columns with changes we just introduced in Orbeon Forms 2017.2.2.  ↩

No comments:

Post a Comment