Skip to main content
Kinetic Community

Building Multi Radio Select Questions

Import Files
Service Item Sample service item.
KURL Insert Your link Here

Overview

Description

Building a Multi Radio Select Survey

Purpose

To use good css practices to make a reusable, easily maintained, and well styled customer survey.

A few things to keep in mind:

  1. Reuse css with classes
    • When the same styles are used on multiple elements, use classes
  2. Implement exceptions on target elements
    • Don’t code multiple classes for one exception, add one class or id specific css style to implement the exception
  3. Be style smart and flexible
    • Don’t try to implement styles that add complexity.
    • ex. If a <br/> is feasible and easier than styling vertical centering for all browsers, use the <br/>.
  4. Check all browsers for compatibility
    • Not all browsers compute css the same way.
    • In fact, many browsers apply styles differently or add styles that others do not.

Notes

  1. All classes/styles as implemented are provided at the end of this document.  You can also download a zipped file of this guide, an importable service item (with css) and a css file with related styles.
  2. Classes should be implemented on the “Styles” tab within Kinetic Survey unless you have designed a css sheet for a theme. One option is to have the displayPage JSP reference that file. Finally, though not recommended, you can also reference a css sheet or declare styles in the CustomHeaderContent of the “Advanced” tab
  3. To learn more about automatically applied styles and theme coloring, see our Theme guides at http://community.kineticdata.com

Headers

headers.jpg

Notes

  • .choiceHeader – With fewer choices, the width will have to be reduced. The total percentage width should be 97.5%, accommodating for padding.
  • .templateSection – each SECTION gets this class automatically applied but the User must define its styles

Question Layer

questionLayer.jpg

Notes

These automatically applied classes have to be defined with styles by the user.

  • .questionLayer – container around question and answer
  • .questionLabel – question label area
  • .questionAnswer – question answer area

Answers

answers.jpg

Notes

  • .answerRadio – automatically applied class to each radio button. User must define style. With fewer choices, the width must change. Total width percentage should be 90%. The left and right margins are defined to help accommodate varied browser margins auto-applied on radio buttons.
  • *Exception – An example of implementing the exception when necessary. Here the user must implement an exception on .questionAnswer by editing the style of the qAnswer element in Kinetic Survey. Use the following style: {left: 0;position: relative;width: 100%;}. If you needed to use this many times, then making it a class to apply to other elements would be the best strategy.

CSS Definitions

.answerRadio{
margin-left: 5px;
margin-right: 4px;
width:18%;
}

.choiceHeader{
background-color: #E4DEF3;
border-right: 2px solid #FFFFF3;
font-weight:bold;
float: left;
padding: 8px 0 8px 0;
text-align: center;
width: 19.5%;
height:36px;
}

.headerContainer{
border-left: 2px solid #FFFFF3;
float: left;
padding: 0 !important;
width: 53.5% !important;
}

.headerLabel{
float: left;
width: 45%;
padding: 8px 0 8px 8px;
background-color: #e4def3;
}

.questionAnswer{
display: inline;
left: 46%;
position: absolute;
width: 55%;
}

.questionLabel{
display: inline;
float: left;
font-weight: normal;
width: 45%;
color: #000000;
}

.questionLayer{
padding:2px;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #000000;
float: left;
font-weight: lighter;
width: 99%;
}

.templateSection {
border: 1px solid #CCCCCC;
padding: 2px;
}

*Exception for textarea answer (see Pg 5)
#qAnswer_***{
left: 0;
position: relative;
width: 100%;
}