Use Case 5. Other and Comment fields customization

Issue

This use case demonstrates how you can change width of the 'Other' field in questions of the Pick One (Radio Buttons) type and 'Comment' field in question of the Pick One with Comment type.

Example is shown on the pictures below:

image2021-8-6_11-39-31.png

Solution

On the survey Edit Layout>CSS page add one of the following pieces of code to improve question appearance:

  • To customize width of the Other field in the Pick One or Other type of question:

.aDivQuestion_Qxxx .inputPickOneOther {width:Ypx !important}
OR.aDivQuestion_Qxxx .inputPickOneOther {width:Ypx !important}

  • To customize width of the Comment field in the Pick One with Comment type of question

.aDivQId_questionIdentifier .inputPickOneComment {width:Ypx !important}
OR.aDivQId_questionIdentifier .inputPickOneComment {width:Ypx !important}

.aDivQuestion_Q 

and

 .aDivQId_

reference to survey question;

xxx

question sequence number;

questionIdentifier

question custom identifier;

.inputPickOneOther -

'Other' field

.inputPickOneComment -

'Comment' field

width:Ypx -

change Y to increase or decrease field width in pixels

!important -

means that the text alignment of this particular item has an advantage over other text alignments indicated in other classes.

Result

As a result, given questions will look as follows:

image2021-8-6_11-43-20.png