Page Comparison

Design concept

!img(src='' meta="big screen / tablet / mobile - with our design system printscreens")

<!-- (This actually is the most platform independent comment) -->

...

Unity app has several rules and defaults for how it renders forms and their inputs and groovy provides some ways on how to alter these.
This guide aims to describe these rules and how to configure them to match desired form layout outcomes.

...

The form inputs are responsive out of the box and on this cannot be overriden by groovy.

The smaller the screen the bigger the adjustments. On very small screens (e.g. mobile phones) all inputs are rendered on a single as one input per row. This cannot be overriden by groovy.
The breakpoint for this behaviour is 480px.

...

This max-width of inputs can be overriden - either for single inputs by using setWidth(), or it can be overridden for the whole form (or even just some of its sections) by using setDefaultWidth() on a parent element (a parent element can be anything that can contain other inputs e.g. EmbeddedConfiguratorConfigurator, Row, Collapse...)

As for every great rule, there exists an exception. The 800 px max-width rule does not apply for inputs in modal windows. In modals the default width for all inputs is 100 %. This is to simplify the work with forms in modals as the modal width is controlled separately (this behaviour can however be overridden, as described later).

Configuration

Note: InputWidth in the examples is imported like so:
import net.pricefx.formulaengine.scripting.inputbuilder.AbstractInputBuilder.InputWidth

...

A container can be either an EmbeddedConfiguratorConfigurator, a Collapse, a Row or a similar parameter.

...

Whilst setWidthis a universal function working everywhere and has already been described above, the setFlex is quite nice and useful alternative that works by specifying the proportion of widths of adjacent inputs in a Row.
The default flex of an input is 1.
The minimum width of an input is 150 px. Inputs in a row will get smaller the more of them is put into the row. When they reach the 150 px threshold, they will wrap to a new line.

Setting the width of a PopupConfigurator modal inputs to 800 px

As has been mentioned earlier, there is an exception for input widths in modal windows so that these inputs are rendered as 100 % wide by default. If for some reason one would need a very wide modal but inputs only 800 px wide by default that can be achieved by setting the setDefaultWidth(InputWidth.LARGE) function on the Configurator builder, like so:

api.inputBuilderFactory()
    .createConfiguratorInputBuilder("Popup (width 1200, inputs still only 800 px)", "FormLayout", false)
    .addToConfiguratorEntry(configurator)
    .setDimensions('1200', '500')
    .setDefaultWidth(InputWidth.LARGE)
	.buildContextParameter()

Setting the width of a PopupConfigurator modal window

...