Skip to main content
Kinetic Community

Building Multi Radio Select Questions

Import Files
Service Item Insert Your link Here
KURL Insert Your link Here



Building a Multi Radio Select Survey


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.


  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




  • .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



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




  • .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

margin-left: 5px;
margin-right: 4px;

background-color: #E4DEF3;
border-right: 2px solid #FFFFF3;
float: left;
padding: 8px 0 8px 0;
text-align: center;
width: 19.5%;

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

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

display: inline;
left: 46%;
position: absolute;
width: 55%;

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

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)
left: 0;
position: relative;
width: 100%;