CSS Use Cases

This set of topics will show you some survey appearance problems that may arise when you design a survey,and use cases how these problems can be resolved by means of CSS. We will work with different question types such as Single-Line, 3D Matrix, Pick One or Other, Rate Different Items, Multiline.

When you design survey appearance using CSS, you can refer to particular CSS classes and apply changes to the bunch of questions of particular type. Another option is to refer to a certain survey element such as question, answer choice, footer and many others, and change element apperance only. More details on the available classes you can find here.

To refer to the particular survey question use the following code #questionMainTableIdXXXXXXX, where XXXXXX is unique question identifier. This unique ID can be found in the source code of the previewed survey or by means of different browser's built-in plugins, such as Developer Tools for Microsoft's 'Internet Explorer', SafariSource for Apple's 'Safari', FireBug for Mozilla's 'FireFox' and others.

We will show you examples of custom design editing using following use cases:

1. Use Case 1 - 'Single-Line' question appearance, position of the input text fields.
2. Use Case 2 - 'Pick One or Other' question with 'across' answer choices position.
3. Use Case 3 - Horizontal and vertical apperance of the '3D Matrix' question items.
4. Use Case 4 - Scale items font size for the '3D Matrix' and 'Rate Different Items' types of question.
5. Use Case 5 - 'Other' and 'Comment' fields customization for Pick One or Other and Pick One with Comment questions.