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

Style Tab

  1. Last updated
  2. Save as PDF
Add CSS styling to the various page elements

Using the Style Tab

The default for styling survey templates is CSS. To let you add either specific item or class styles to your survey template use the Style tab.

Example of Blank Style:

style nasic blank.JPG

CSS Style Class lets you either add your own CSS class name (seperated by a space), or select from the drop-down list.

The drop-down list will start with any CSS classes that have been applied to any survey template on the current survey category and all the default classes that the application adds. As you add your own classes, they are added to the drop-down list.

Example of CSS Classes:

style tab default classes.JPG

Here is an article with all the default classes.

Hide/Remove lets you accomplish the most common action styling is used for with questions, hiding or removing. Select the option from the drop-down list, and the html of the question will be updated. You can use events to Show/Insert the question.

Set to Read-Only sets the answer to Read-Only

The table shows any applied ID styles with the type.

Properties field shows the specifics of the style selected from the table.

Example of table and property:

style tab sample property.JPG

Add, Modify, and Delete buttons let you create and maintain css for the specific elements

Clicking on Add presents the following dialog:

style tab add dialog.JPG

Style Type is set to HTML ID when you add a style directly from the element, as opposed to the Combined, Class or HTML Tag options from the Style tab on the entire service item.

Style Selector has the following options

All - applies the style to the entire question - known as QLAYER

Answer Label(s) - applies the style to the individual labels for option questions like radio buttons - known as QANSWER

Answer Value - applies the style to the input of the answer, commonly the answer to free text - known as SRVQSTN

Question Label - applies the style to the label of the question - known as QLABEL

Style Property contains the actual style declaration, property and value pair. For example, float:left; You do not need to add the curly brackets before and after the declarations. The application will add them for you. 

Helpers drop-down list provides a list of selected CSS properties.

Example of Modify dialog with style:

style tab modify dialog.JPG

This style will make the question label bold.