Orbeon community‎ > ‎Contributions‎ > ‎

Form Builder: support for up to 6 columns


Since 2011-05-20, Form Builder supports the oxf.fb.grid.max-columns property. See Configuration Properties - Form Builder. That property makes the settings below obsolete.


To increase the maximum number of supported columns in Form Builder from 4 to 6:
  • In resources/forms/orbeon/builder/resources/form-builder.css, add the following after the corresponding lines for 4 columns:
.fb-grid-5-columns .fb-grid-td { width: 20%; }                         
.fb-grid-5-columns .fb-grid-td .fb-grid-content { width: 8.8em; *width: 8.4em }                                                                
.fb-grid-6-columns .fb-grid-td { width: 16.6%; }                       
.fb-grid-6-columns .fb-grid-td .fb-grid-content { width: 8.8em; *width: 8.4em }                                                                
  • In resources/forms/orbeon/builder/form/form.xhtml, replace xs:integer($columns) lt 4 by xs:integer($columns) lt 6 in two locations.


  • Showing some controls in narrower columns poses a number layout issues which are not all solved by the CSS above. For instance text areas are too wide and overlap with the next column.
  • The Form Builder CSS for the the wider #doc4 layout is not provided.
  • The Form Builder CSS (form-runner-base.css) for 5 and 6 columns is not provided.


  • This change was contributed by Jason Woerner and Paulo Branco of Econstruction.