Orient a Label and a Form Element

This tutorial will show you how to orient a label and a form field in relation to each other.

Create a form giving it any id and action you wish then create a Text Box with any id and label.

Go to the presentation pane and your form should look like this (with a different label of course)

Highlight the Label

The first thing we'll do is give the label a background color so we can visualize the space it occupies. Select 'TextBox One' from the "Choose Parent" menu and 'Child Label' from the "Choose Target Child" menu

then click the 'Add' pane in the blue css rules window, select 'Background Color' from the menu, set it's value to #ffc and click the 'Add Rules' button.

Your form should now look like this

Move the Elements Side by Side

To change the position of the label and the Text Box in relation to each other, we have to edit the column and row definition of their parent container. We already have that parent container selected in the "Choose Parent" menu, just select 'This Container' from the "Choose Target Child" menu

and you'll see this in the red column definitions window

Each of the form fields in this window represent an element in this container - namely the label (top field) and the text box (bottom field). The number in each field (100) represents the percentage width of the container that the element occupies.

To move the label and text box side by side, click the "+" button next to the first row. This button will add a new column to the first row, and move the text box up to occupy it.

Your form should now look like this

and the column definitions window like this

As a quick aside, change the '50' in the first field (which represents the width of the label) to 30 and the '50' in the second field (which represents the width of the text box) to 70 and click the "Save Changes" button.

Your form now looks like this

You can set these width values to any combination (as long as the total width for any row is less than 100).

Change the widths back to '50' and '50' and I'll show you how to change the element order.

Change the Element Order

Click the "Element Order" pane in the same window, and you'll see this

It should be fairly obvious what each row represents. The "<" and ">" buttons allow you to move the elements in relation to each other. The element position in this window has nothing to do with the row and column configuration of the container, it simply represents each element's order from left to right and top to bottom in the group.

Click the ">" button to the right of the [label] row (or the "<" button to the left of the [textbox] row as they accomplish the same thing) and your label will switch places with the text box in your form

and the Element Order pane reflects this change

Go back to the Column Definitions pane and click the "-" button next to row one. This will change the column definition back to the default two row and one column layout.

You can see in your form that the label appears after the text box no matter the column configuration.

Wrapping Things Up

Using these two panes, you can change the orientation of any grouped elements so that they appear side by side or above and below each other, in any order.