Grids and Columns
Usage
Download and place the file columns.css on the Kinetic Request Web server. A good but not necessary location is <INSTALLATION DIRECTORY>/webapps/kinetic/resources/css.
Link the Service Item to the file by adding the following line to the Custom Header Content field on the Advanced tab of the Service Catalog Console:
<link href="resources/css/columns.css" rel="stylesheet" type="text/css"/>
Sections
Question, Text and Image elements are childeren contained within Section Elements. Section element are defined with of the number of columns to use by giving it one of several css style classes. Each child element placed within the section will be sized and placed appropriately base on the number of columns defined in the section element. For example a css style class of "3cols" is applied to a section create a section with 3 columns.
Spans
If you would like a question to span multiple columns, the question element can be given a style to indicate this. Giving a question element a css style class of "span2" will span the question across 2 columns.
First Element in a Row
The style sheet give each question element a left margin of 2%. The first element in each row must have this 2% left margin removed in order to display it correctly. The first element in each section will automatically have it removed. Every other element which is first in a row, must be defined to remove the left margin. This is done by giving the question a css style class of "first".
As an example if there are 6 question elements in a section element defined with 3 columns, the first question will automatically have the left margin removed. The 4th question will automatically start the 2nd row but still have a left margin of 2%. This question must be given a css style class of "first" to remove the left 2% margin. Note that multiple styles can be used together.
Example
Below is an example of the result from using the style sheet and applying the css style classes to elements. The example may be downloaded and imported onto a Kinetic Request installation. Download the Columns and Grids example Service Item.