The Edit Column Definitions Pane

The Edit Column Definitions Pane allows you to change both the width of and the number of columns in each row of the selected Form Group (selected with the Choose Parent menu).

Consider the following form, made up of two fieldsets (each containing two elements) with a select menu between them

and the Edit Column Definitions Pane for The Form

Note that there is an input field with a value of '100' for each Form Group - one for Fieldset One, one representing the Container around Select Menu One, and one for Fieldset Two. This value represents the percentage width of the Form Group.

Notice how the form changes when the value in the second input field is changed to 50

The select menu is now 50% as big as each fieldset. In effect, each fieldset takes up 100% of the width available for the row it's on in the form, and the select menu (or the container around the select menu to be precise) takes up 50% of the available width of the row it's on in the form.

Now, let's change the form back to it's original configuration and select "Select Menu One" from the "Choose Parent" menu. The Edit Column Definitions pane now looks like this

When you remember that the select menu is actually composed of a containing html paragraph that has the select menu label and the menu itself as children, you'll see that the top input field represents the label and the bottom input field represents the menu.

You can always take a look at the Edit Element Order Pane for the Form Group you're editing if you're unsure of what each input field represents.

Here you can clearly see that the top input field is the label and the bottom is the select menu.

After adding a background color to the label so you can visualize it's width, let's change that width to 70

and then change the select menu width to 20

Each element remains on it's own row and each width in the Edit Column Definitions pane represents the percentage width that each element consumes of the entire width available for that row.

Adding and Removing Columns

After changing the select menu and label we edited above back to 100 width for each, I press the "+" button next to the top input field

and this adds a column to the first row of the Form Group, moving the select menu element up to fill that column and setting the width of each to 50 (each consumes 50% of the available width for the row).

If I were to click the "-" button at the end of the row, the last column would be removed from the row, the select menu would drop down to row two, and the widths would reset back to 100 for each row.

Now, back to our two column row.

If I change the first column input field to 70 and the second column input field to 30, this results

The label column is taking up 70% of the width available for the row and the select menu is taking up the remaining 30%. The editor won't allow you to set the total percentage value for each row to more than 100, but watch what happens when I set each width to 30

Each column takes up 30% of the available width (the label text is too long to fit in this 30% and word wraps down) and the remaining 40% is unfilled.

Create Complex Form Layouts

Using combinations of setting column widths and adding columns to the various rows in the Form Groups of your form, you can create very complex layouts; splitting each row by up to 100 columns and easily setting differing column definitions for each row of the group.