Skip to main content

IMPORTANT - Product End of Life Statement - IMPORTANT

Request RE, Survey, and Calendar 1.5 Support Ending December 31, 2020
Contact Kinetic Data Support with Questions
Kinetic Community

Grids and Columns

  1. Last updated
  2. Save as PDF
It is often desired to organized elements in Kinetic Request into column or grids.  Placing the elements into grids allows multiple questions to be placed in a row and gives the Service Item a cleaner and more professional look.  A simple CSS (Cascading Style Sheet) file can be included in the service item to assist in placing elements into neatly aligned 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.

3cols.JPG

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.

span2.JPG

 

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.

first.JPG

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.

columns example.png