Recurring Component Elements: Style
in Common Forms

Style element that is used in all Form components to define the width of components

Recurring Form content elements are elements that occur in multiple components with more or less similar functions and display. The elements are: Constraints and Style.

The Style element is used to define the width of a component.

on this page:
Occurrence of Style element , Opens In New Window Display & Usage , Opens In New Window
Excursion: Columns component , Opens In New Window
Dialogue settings , Opens In New Window
Style element in Form component , Opens In New Window

Introduction

The Style Element is used to define the width of a component. The Common Forms components are per default displayed with a width of 100%, meaning that they use the entire available content width. By setting a different width, the components receive a floating behaviour. This means that if a component A has a width of 50% set and the following component B as well, the component B fills up the available space on the line above until 100% is filled up.

 

Glossary:

Example:

Style Size set to 50%

Style Size set to 100%

Occurrence of the Style element

The Styling tab with the Style element can be found in the following Form components:

Display & Usage

Within the available content width, which is set in the Form component itself (Style = Large, Medium, Small), it is possible to define a specific width for each component. The position of all components within a form is not fixed, but instead they have a floating behaviour. The available Form container content width equals 100%. So if 2 subsequent components have set their width to 50%, they both fill up the available width to 100% and are displayed on the same line.

By using this setting, forms that contain components next to each other can be created that seem to be set up in columns. The most common set up is 2 subsequent components with each 50%, but of course, any available width can be used to create the desired design. Please see the following examples:

Please note that the floating behaviour is not reflected in the GEM Author, Edit Mode. Every component is displayed as 100%. To see the effect, please switch to the Preview Mode.

Columns component in Forms

Instead of using the Style Size of a component to limit its width, it is also possible to work with the Columns component. The columns also forces the components into divided columns but it can be used to set up some special design like the Submit button being displayed on the right side instead of the left, without having another component on the same line. 

To produce this layout, simply add a Columns component, set it to e.g. 1 column with a Left Offset (here. 10 Grid Columns) and add the Submit Button.

 

Dialogue settings

The Styling tab is available in most Common Forms components, see a list in the Occurrence of Style element section.

tab: Styling

The Recurring Component Element Style can be found in every Styling tab. In some components, there are additional elements available besides the Style element. This example of the Upload component consists only of the Style element.

Style element in Form component

The Style element in the Form component varies from the one in the other Forms components. Its width can't be set by percentage and it does not produce a floating behaviour. Instead, the width of the entire form can be defined. Within this width, all Form components use the available main content width.

There are 3 options to choose from: Large, Medium and Small.

Form Style = Large

Form Style = Medium

Form Style = Small

Please see the Form component help page for more information.

tab: Styling

The Style element in the Form component has different options to choose from.

Related topics