Lining up wrapped response texts
When a categorical response text is too long to display on a single line, the interviewing program wraps it onto as many lines as necessary. This wrapping is very simple and does not take into account the radio button or check box at the start of the first line, so the continuation lines start underneath these buttons. You can force the interviewing program to line up continuation texts with the start of the text on the first line by editing the .css file for the project.
To line up continuation texts in response lists, add mrSingle, mrSingleText, mrMultiple, mrMultipleText, mrOtherEdit, and mrOtherText sections to your style sheet as follows:
Add the following style for span layout
/* ---- Lining Up Wrapped Response Texts Control ---- */
span.mrQuestionTable span{ position: relative; }
span.mrQuestionTable span input.mrMultiple{ display: block; position: absolute; }
span.mrQuestionTable span input.mrSingle{display: block; position: absolute; }
span.mrQuestionTable span label span.mrSingleText{display: block; margin-left: 3em; }
span.mrQuestionTable span label span.mrMultipleText{display: block; margin-left: 3em; }
/* ---- mrOther Style Control ---- */
span.mrQuestionTable span span input.mrOtherEdit{ display: block; margin-left: 3em; }
span.mrQuestionTable span span label span.mrOtherText{ display: block; margin-left: 3em; }
Add the following style for table layout
/* ---- Lining Up Wrapped Response Texts Control ---- */
table.mrQuestionTable tbody tr td{ position: relative; }
table.mrQuestionTable tbody tr td input.mrSingle{ display: block; position: absolute; }
table.mrQuestionTable tbody tr td input.mrMultiple{ display: block; position: absolute; }
table.mrQuestionTable tbody tr td label span.mrSingleText{ display: block; margin-left: 3em; }
table.mrQuestionTable tbody tr td label span.mrMultipleText{ display: block; margin-left: 3em; }
/* ---- mrOther Sytle Control ---- */
table.mrQuestionTable tbody tr td input.mrOtherEdit{ display: block; margin-left: 3em; }
table.mrQuestionTable tbody tr td span label span.mrOtherText{ display: block; margin-left: 3em; }
/* ---- Clear GridCategory Control Style ---- */
table.mrQuestionTable tbody tr td[class~=mrGridCategoryText] ~ td input.mrSingle{ display: inline; position: static; }
table.mrQuestionTable tbody tr td[class~=mrGridCategoryText] ~ td input.mrMultiple{ display: inline; position: static; }
Notes
▪You can include both Span Layout and Table Layout in the same style sheet.
▪When using Table Layout you must include the Clear GirdCategory Control Style section. Failure to include the section will result in Grid control display issues.
▪The margin-left: 3em; attributes are required, but their values can be modified to suit your needs.
▪If your project does not have a style sheet, you can create one by copying the default one (for example,
[INSTALL_FOLDER]\IBM\SPSS\DataCollection\7\Interviewer\ Server\Server\mrIWebCATI\CATIPlayer.css for telephone interviews) into your project’s source folder and editing it as necessary. Then add an
<mrRef> tag to the project’s layout template naming the
.css file as described in
Naming the stylesheet in the template.
See also