Field Grid Layout

 

Documentation home

 

Description. 1

Controls on same line. 1

Properties 2

Advanced Properties 12

Control Widget 13

Hints and Tips 13

Vertical Alignment property appears to do nothing. 13

Vertical Alignment 13

Column Widths not respected. 13

 

See also: Containers, Layouts, Introduction to Styling, Styling Assistants, Controls

 

Description

The Field Grid Layout provides specific functionality to display Field Controls in a grid structure where the label, editor and help portions of each Field Control are displayed in three separate table columns and are therefore vertically aligned. To style Field Controls, configure the label, editor and help properties below under Field Control Row.

 

All other controls are displayed in their own table row with the three table columns merged (see the Register button in the diagram below). To style these non-field controls, configure the Non-Field Control Row properties below.

 

This layout provides compatibility with the layout used by Ebase Xi prior to Version 4.0.

 

 

Controls on same line

When placed inside a container with a Field Grid Layout, all controls have a New Line property which is supported only by the Field Grid Layout. A control is displayed on the same line as the previous control if the New Line property is unchecked. In the case of Field Controls, the label and editor portion of the field are displayed immediately after the editor portion of the previous Field Control and in the same table cell:

 

 

For controls other than Field Controls, the control is displayed immediately following its predecessor if the New Line property is unchecked.

 

 

Properties

Layout properties are accessed by clicking the Layout properties property of any container control that has a layout type set to Field Grid.

 

 

Qualifier: layoutProperties.FIELD

Property

Description

Name1

Type1

Get1

Set1

Get/Set Values1

This section contains properties that apply to the entire layout.

Background

Background applied to the layout table. See background properties. These properties can be overridden for individual controls using the Override layout property.

 

 

 

 

 

Border

This border is applied to each row in the layout table.  See border properties.

 

 

 

 

 

Cell Spacing

Space between adjacent table cells, including both horizontally, space between label, editor and help cells – and vertically – space between adjacent lines.

 

When this parameter has a non zero value, any borders will be drawn around individual cells.

cellSpacing

Character

Yes

Yes

As CSS width property

Cell Padding 

Padding between each table cell’s content and its border.

cellPadding

Character

Yes

Yes

As CSS width property

Block Vertical Alignment

Sets vertical alignment for the entire layout as a whole e.g. setting this property to center will place all controls as a block in the center of the container’s vertical space. This property is only effective when the container is tall enough to accommodate vertical repositioning of its children e.g. the height has been set explicitly using the container’s height property.

 

Options are:

  • Bottom – bottom align all content as a whole
  • Center – center align all content vertically as a whole
  • Fill - space all rows to fill the available height
  • Top – top align all content as a whole

vAlign

Character

Yes

Yes

Click here for values.

Field Control Row

These properties apply to a layout row containing a Field Control

Label Cell Properties:

This section contains properties that apply to the label part of the layout used with Field Controls.

  Width

Sets the width of the label table cells. This property is set automatically to a % value when the widths are adjusted using the Field Grid Layout widget.

labelWidth

Character

Yes

Yes

As CSS width property

  Background

Background applied to each label table cell. See background properties. This group of properties can be overridden for individual controls using the Override layout property.

labelBackground

.xxx

 

 

 

 

  Padding

Padding applied to each label table cell. See padding properties. This group of properties can be overridden for individual controls using the Override layout property.

labelPadding

.xxx

 

 

 

 

  Horizontal Alignment

Sets horizontal alignment for each label within its table cell. This property can be overridden for individual controls using the Override layout property.

 

Options are:

  • Center – center align each label within its table cell.
  • Left - left align each label within its table cell.
  • Right – right align each label within its table cell.

labelHAlign

Character

Yes

Yes

Click here for values. Value Fill is not supported.

  Vertical Alignment

Sets vertical alignment for each label within its table cell. This property can be overridden for individual controls using the Override layout property.

 

Options are:

  • Bottom – bottom align each label within its table cell
  • Center – center align each label within its table cell
  • Top – top align each label within its table cell

 

The default is Top.

labelVAlign

Character

Yes

Yes

Click here for values. Value Fill is not supported.

Editor Cell Properties:

This section contains properties that apply to the editor part of the layout used with Field Controls.

  Width

Sets the width of the editor table cells. This property is set automatically to a % value when the widths are adjusted using the Field Grid Layout widget.

editorWidth

Character

Yes

Yes

As CSS width property

  Background

Background applied to each editor table cell. See background properties. This group of properties can be overridden for individual controls using the Override layout property.

editorBackground

.xxx

 

 

 

 

  Padding

Padding applied to each editor table cell. See padding properties. This group of properties can be overridden for individual controls using the Override layout property.

editorPadding

.xxx

 

 

 

 

  Horizontal Alignment

Sets horizontal alignment for each editor within its table cell. This property can be overridden for individual controls using the Override layout property.

 

Options are:

  • Center – center align each editor within its table cell.
  • Left - left align each editor within its table cell.
  • Right – right align each editor within its table cell.

editorHAlign

Character

Yes

Yes

Click here for values. Value Fill is not supported.

  Vertical Alignment

Sets vertical alignment for each editor within its table cell. This property can be overridden for individual controls using the Override layout property.

 

Options are:

  • Bottom – bottom align each editor within its table cell
  • Center – center align each editor within its table cell
  • Top – top align each label editor its table cell

 

The default is Top.

editorVAlign

Character

Yes

Yes

Click here for values. Value Fill is not supported.

Help Cell Properties:

This section contains properties that apply to the help part of the layout used with Field Controls.

  Width

Sets the width of the help table cells. This property is set automatically to a % value when the widths are adjusted using the Field Grid Layout widget.

infoWidth

Character

Yes

Yes

As CSS width property

  Background

Background applied to each help table cell. See background properties. This group of properties can be overridden for individual controls using the Override layout property.

infoBackground

.xxx

 

 

 

 

  Padding

Padding applied to each help table cell. See padding properties. This group of properties can be overridden for individual controls using the Override layout property.

infoPadding

.xxx

 

 

 

 

  Horizontal Alignment

Sets horizontal alignment for each help field part within its table cell. This property can be overridden for individual controls using the Override layout property.

 

Options are:

  • Center – center align each help within its table cell.
  • Left - left align each help within its table cell.
  • Right – right align each help within its table cell.

 

Warning: when the field help text is displayed underneath the field editor, this property will have no effect. Use the alignment property in Field Control under Help Properties to achieve this.

infoHAlign

Character

Yes

Yes

Click here for values. Value Fill is not supported.

  Vertical Alignment

Sets vertical alignment for each help within its table cell. This property can be overridden for individual controls using the Override layout property.

 

Options are:

  • Bottom – bottom align each help within its table cell
  • Center – center align each help within its table cell
  • Top – top align each label help its table cell

 

The default is Top.

infoVAlign

Character

Yes

Yes

Click here for values. Value Fill is not supported.

Non-Field Control Row:

This section is used to style all controls which are displayed across the full width of the layout (controls other than Field Controls)

  Padding

Padding applied to each full width control. See padding properties. This group of properties can be overridden for individual controls using the Override layout property.

fullWidthPadding

.xxx

 

 

 

 

  Horizontal Alignment

Sets horizontal alignment for each full width control within its table cell. This property can be overridden for individual controls using the Override layout property.

 

Options are:

  • Center – center align each control within its table cell.
  • Left - left align each control within its table cell.
  • Right – right align each control within its table cell.

fullWidthHAlign

Character

Yes

Yes

Click here for values. Value Fill is not supported.

Advanced Properties:

 

 

 

 

 

 

  Layout table style

See Advanced Properties

tableClass

tableStyle

Character

Yes

Yes

As per HTML class parameter

As per HTML style parameter

  Label cell style

See Advanced Properties. This property can be overridden for individual controls using the Override layout property.

labelCellClass

labelCellStyle

Character

Yes

Yes

As per HTML class parameter

As per HTML style parameter

  Editor cell style

See Advanced Properties. This property can be overridden for individual controls using the Override layout property.

editorCellClass

editorCellStyle

Character

Yes

Yes

As per HTML class parameter

As per HTML style parameter

  Help cell style

See Advanced Properties. This property can be overridden for individual controls using the Override layout property.

helpCellClass

helpCellStyle

Character

Yes

Yes

As per HTML class parameter

As per HTML style parameter

 

1 See accessing control properties from scripts

 

Examples of setting properties via API based language:

 

controls.PANEL1.layout.backgroundColor = "red";

controls.PANEL1.layout.labelBackground.backgroundColor = "#00FFFF";

controls.PANEL1.layout.editorPadding.allPadding = "3px";

controls.PANEL1.layout.tableClass = "myLayoutTableClass";

controls.PANEL1.layout.labelCellStyle = "padding-top:5px;";

 

Examples of setting properties via FPL:

 

set PANEL1.layoutProperties.FIELD.backgroundColor = 'red';

set PANEL1.layoutProperties.FIELD.labelBackground.backgroundColor = '#00FFFF';

set PANEL1.layoutProperties.FIELD.editorPadding.allPadding = '3px';

set PANEL1.layoutProperties.FIELD.tableClass = 'myLayoutTableClass';

set PANEL1.layoutProperties.FIELD.labelCellStyle = 'padding-top:5px;';

 

 

Advanced Properties

The following diagram shows how Field Controls are laid out in a Field Grid Layout and the available advanced properties. The properties shown in green are Field Control advanced properties as opposed to layout properties and are shown only to provide a complete picture of how Field Controls in a Field Grid Layout are handled. The properties shown in blue are Field Grid Layout advanced properties.

 

 

 

Controls other than field controls are displayed across the full width of the table by spanning all three table columns as shown in the following diagram.

 

 

                                                                                                                                                    

Control Widget

When a Field Grid layout is set on a container control, the grid column width widget is displayed when the container control is selected; this widget allows setting of the label width, editor width and help width properties by dragging the width icons. This widget will set the width properties as % values; to use other size unit values, edit the properties in the dialog above.

 

 

Note that there can be discrepancies between the column widths shown in the widget and the column widths shown immediately below in the WYSIWYG View, click here for further details.

 

Hints and Tips

Vertical Alignment property appears to do nothing

Use the Vertical Alignment properties for the individual label, editor and help cells. The Vertical Alignment property at the top of the dialog aligns the entire layout as a block and only does anything when the container has sufficient height.

Vertical Alignment

The safest alignment for all the Vertical Alignment properties is Top.

Column Widths not respected

Sometimes, the column widths do not seem to be respected when the form is run in a browser. This is usually because the browser is dynamically changing a width to accommodate some content that doesn’t fit e.g. a large input box. Click here for further details.