This topic covers the mechanics of layout. See here, for a discussion on the aesthetics and design of form layout from. Also see another discussion on Useability and Accessibility.

 

Problems with explicit position layouts

When designers build a form using simple tools, they tend to drag a widget into a specific position on the form — known as absolute or x-y positioning — then re-position and re-size it using their mouse. This works for simple forms only, not when dealing with multiple device types, nor with maintaining existing forms. Explicit positioning:

 

•Cannot ensure that forms flow correctly on different technologies, for example on the desktop, tablets or smartphones.

•Cannot ensure all fields have the same styling and sizing.

•Cannot ensure that all fields line up nicely.

•Cannot ensure proper placement on the high resolution devices. Doing this manually is very time consuming and the results are inconsistent.

•Cannot save designers from filling in parameters manually into dialogs. For example, "all standard text fields are 1.5in wide, a caption of 1.2in, and placed 0.7in in from the left margin". The designer then needs to know these magic numbers, and apply them consistently and enter them for every single field on the form.

•Makes a big job out of inserting a new field vertically between two existing fields.

•Cannot automate changing all the fields on the form to have, for example, all the field captions left or top-aligned, or changing all the fonts or background colors.

•Cannot automate changing the width of the form, or its margins and so forth. Instead, every field has to be repositioned.

 

Layout Managers and Hints

For these reasons, Composer automates the detailed layout of fields. All you do is specify the order of the fields and, optionally, a few extra "hints" and let Composer do the rest.

 

Hints may be such things as:

 

•Keep this field on the same line as the previous one

•Make this field as wide as possible (within the bounds of the space that it has available on the page)

•Spread these two fields across the page, in the ratio 40% to 60%.

•Lay out these 12 fields equally spaced in a 4 column grid

 

The Layout Panels

The default settings for the Composer layout managers are set in the template for the form. The following documents how to tweak the layout of elements on the form when the default positioning of an element needs it.

 

You make layout adjustment through 3 panels in Edit Properties. They are:

 

•The Layout Manager panel

•Layout Constraints

•Sizing

 

You access these panels in "Edit Properties" through "Properties -> Layout" or in the "Layout Assistant" tab. (That tab, though, does not contain the "Sizing" panel.)

 

Note the mini Structure Panel (marked "Fields") in the LH Menu of the tab. And, there is also a mini wireframe available on the RH side of the tab in which you can test the effect of tweaking the values in the "Layout Manager" and "Sizing" panels.

 

The Effect of the Different Layout Managers

Flow — Top to Bottom

A lot of forms are very simple - they just contain a series of fields going down the page. This is also the best layout for the narrower screens on mobile devices.

 

To achieved this type of layout, you can use the Top to Bottom flow. Fields in a Vertical Flow simply go below each other down the page. The Vertical Flow is always the default manager on all sections and blocks.

 

There are a few options or "layout hints" that you can specify with the Vertical Flow layout manager to achieve higher levels of usability. These include:

 

 

The Top to Bottom flow does not change the width of any of your fields (unless you select Layout Fill). Your field width will be:

 

•The "natural" width of the field as defined in your organization stylesheet; or

•The style-set that you associated with this field when you dragged it into the form. Typical style-sets include widths like "Tiny", "Small", "Medium" and "Large", but this will vary depending on how your organization's stylesheets have been set up. If you want to change the style set after you've created the field, you can change it in "Styling -> Stylesets -> Field Size".

•If you select Layout Fill, the layout manager will try to use as much of the line's space as possible and take into account the size of the screen or page, margins, borders and gutter areas, space allocated to menus, and the other fields on the same line.

 

Note: If you specify too many fields on the same line, this can create layout problems, particularly on smaller screens. The behavior of a line with too many fields will depend on the Responsive Layout rules.

 

Flow — Left to Right

The Top to Bottom Flow is suitable for many simple types of forms; you often need, however, more fine-grained control over how fields spread out across the page. This is where the Left to Right Flow layout manager, comes in.

 

Horizontal Layout allows you to lay out several fields across the page with very fine-grained control over the size of each field by specifying the percent width of each field.

 

Note: While we generally talk about percentages, those percentages need not to add up to 100: Composer will adjust accordingly.

 

The beauty of using percentages is: should you need to add another field onto the same line, move a field, re-size a field, or switch from portrait to landscape, all the other fields will automatically adjust to accommodate the changes. Form maintenance then becomes easy. The fields will also retain their proportions on the range of mobile devices.

 

Left to Right Flows are always used in conjunction with Top to Bottom. The Top to Bottom controls each line of fields; and Left to Right within each line.

 

Multiple fields per line

The simplest way to get multiple fields on the same line is to use a Top to Bottom Flow and the "Keep on Same Line" property ("Properties -> Layout -> Layout Constraints"). This, however, gives you little control over the sizing of the fields.

 

For more control, use a Left to Right flow inside a Top to Bottom to finely control the widths of each of the fields in the single line. Using even multiples of a base size will result in fields on subsequent lines being lined up to each other. This is shown in the screenshot below.

 

 

 

Two-column forms

 

You can create a two column layout by using two blocks laid out within a horizontal flow layout, with fields inside them laid out horizontally.

This is shown in the screen-shot below:

 

 

 

Note: You can use the Margin property to provide extra spacing between the two columns, or use another smaller block between the two.

 

Grid Layout

Often, you have to lay out a large number of fields and, for an elegant layout, all these have to align correctly. The Grid layout manager, which is specified on blocks or sections, can achieve this.

 

By default, each column in the grid has equal size, but you can also specify the width of each column by defining a percentage of the space available, or a fixed size in mm or inches. For example, in a 3 column grid, you may specify the column widths as "100% 60mm 100%". As in the example, these percentages need not add up to 100.

 

 

 

 

 

Grids can also be used as part of a hybrid layout. For example, a grid could contain one or more blocks which in turn could contain widgets, or grids could be arranged within a vertical or horizontal flow layout.

 

Each of the objects added inside the grid can specify hints that provide additional control over how they are laid out.

 

•Go to next line

•Span

 

 

In the example below, I begin by using  as I have 5 checkboxes.

 

Because 'More than once a week' is such as long caption, I select the 'Force a row break after' that checkbox and make it "span 2 columns".

 

 

Result:

 

 

Tip: Grid layout is particularly useful for laying out multiple checkboxes and radio buttons. Even if your radio buttons all appear on one line, it's still advisable to place them in a grid layout. Decide on a standard grid size for all radio buttons, and always use that grid size for all radio button groups, regardless of how many radio buttons you have. If you do this, all your radio buttons in your entire form will all line up nicely.

 

Tip: If you have a radio button with a longer than usual caption, simply set the span to 2 so that it uses up two grid cells.

 

 

 

 

Fillers, Springs and Page Breaks

There are a few special objects in Composer that deal specifically with laying forms out.

 

 

There are three other properties in Composer that affect page breaks in PDF forms, in the "Properties -> Pagination -> Pagination Control" panel: