Making The Most of Toggleable Forms

The Nuxeo Application contains many layouts that are designed to be a single “column”. The creation form for a Note document is one such example. In the screenshot below you can see that the form has a limited width despite the space available in the browser.

If the above form used the full width available it might look a bit strange. For example, the Title field would be excessively wide. This single-column layout exists because, by default, the ‘dataInput’ CSS class has a ‘max-width’ property defined. This keeps simple forms readable​ despite different browser window sizes.

However, a more complex form layout may be too constrained by this design. In the example below, you can see that we are trying to achieve a two-column layout and, more importantly, the two text editing areas should be wider:

Here is the solution to make the forms use all of the space available when designing a Layout or Tab:

Add a class to the Container, for example ‘wideDataInput’:

In the CSS Tab for the Branding add the following rule:

/* Make dataInput wide => no max-size, used in FullPage tab */
.wideDataInput .dataInput {
    max-width: none;
}

Use this ‘wideDataInput’ class on other containers and the style will be applied:

Note that this behavior was enabled by default starting with Nuxeo LTS 2015 HF3. So, you may want to do the opposite and constrain the width of the form. The same technique can be used but set the max-width to a specific amount instead of “none”. Explore these options and make your forms look the way you want.