Horizontal alignment
When you display items on a page side by side (for example, when you display the question text and the response list or input box on the same line), you need to do two things. First, create a template that generates this page layout (see
Questions, responses, and error messages for details). Second, add keywords or statements to the script that specify the alignment and position of the question text and response control.
Horizontal alignment covers two aspects of a page’s layout:
▪Alignment of text within its space on the page. For example, right-justifying the question text within the space allocated to question texts in the template. Use the align label style keyword for this.
▪Alignment of one element relative to another. For example, puttin a question and its response control on the same line, or placing two questions on the same line. Use the elementalign style keyword for this.
You can use these keywords in either the metadata section or the routing section of the script. You can also apply both types of alignment to the same question, if appropriate. For example, you might place a question’s text and response box on the same line, and right-justify the question text in the part of the page used for that text.
When a label is rendered as a span in the HTML page, the selected alignment style will not work until the associated width or height styles are specified. For example:q1.Label.Style.Width="100%".
In the metadata section
To specify the alignment of a question or information text within the space allotted to it in the template, insert the following element after the text:
labelstyle(align = "Left|Center|Right|Justify|Default")
If you do not specify alignment, the interviewing program uses left alignment.
For example, the default page layout template right-aligns the four question texts within the space that the template allocates for questions texts:
FirstName1 "First name"
labelstyle(align = "right", width = "5em")
text [0..25];
LastName1 "Last name"
labelstyle(align = "right", width = "5em")
text [0..30];
Age1 "Age"
labelstyle(align = "right", width = "5em")
long [18 .. 99];
Gender1 "Gender"
style(control(type = "droplist"))
labelstyle(Align = "Right", Width = "5em")
categorical [1..1]
{Male, Female};
Personal1 "" page(Firstname1, Lastname1, Age1, Gender1);
Each question text is right aligned in a field five ems wide. Specifying the field width ensures that the texts line up correctly regardless of their length. If texts are longer than the field width, they are wrapped onto as many lines as necessary and the bottom line of text is aligned with the bottom of the response box.
To specify the alignment of the response control relative to the question text, place the following element after the question text:
style(elementalign = "Right|Newline|Default")
The default value is Newline (under the question text).
You can also use this notation when you want to set up forms with more than one question and response control on a line. For more information, see
Forms.
For example, when used with a template that displays question texts and responses side by side, the following code:
FirstName2 "First name"
labelstyle(align = "right", width = "5em")
style(elementalign = "right") text [0..25];
LastName2 "Last name"
labelstyle(align = "right", width = "5em")
style(elementalign = "right") text [0..30];
Age2 "Age"
labelstyle(align = "right", width = "5em")
style(elementalign = "right") long [18 .. 99];
Gender2 "Gender"
style(Control(Type = "DropList"))
labelstyle(align = "right", width = "5em")
style(elementalign = "right") categorical [1..1]
{Male, Female};
Personal2 "" page(Firstname2, Lastname2, Age2, Gender2);
produces:
Question text and response controls side by side with right-aligned question texts
Without the template, this code would produce the same layout as the previous one. In this instance, the following question sub-template was used to define the question’s layout:
<mrSubTemplate>
<mrData QuestionElement="Label"/>
<mrData QuestionElement="Controls"/>
</mrSubTemplate>
For more information about subtemplates, see
Sub-templates. For general information about templates, see
Laying out the components of a question.
In the routing section
To specify the same layouts in the routing section, use the following statements:
<question_name>.Label.Style.Align = Alignments.<alignment>
<question_name>.Style.ElementAlign = ElementAlignments.<relative_alignment>
where:
▪<question_name> is the question name.
▪<alignment> is the alignment of the question or information text; one of: alLeft, alCenter, alRight, alJustify (for evenly spaced elements), or alDefault (the default alignment for the Player). If nothing is specified, text is left-aligned in the space available.
▪<relative_alignment> is the alignment of the response control relative to the question text (or of the next question text relative to the previous response control) and is one of: eaRight, eaNewline (under the question text), or eaDefault (the default alignment for the Player). If nothing is specified, eaNewLine is assumed.
The statements that define the alignment shown in the most recent illustration are:
' Field width for question texts
FirstName.Label.Style.Width = "5em"
LastName.Label.Style.Width = "5em"
Age.Label.Style.Width = "5em"
Gender.Label.Style.Width = "5em"
' Right-align question texts
FirstName.Label.Style.Align = Alignments.alRight
LastName.Label.Style.Align = Alignments.alRight
Age.Label.Style.Align = Alignments.alRight
Gender.Label.Style.Align = Alignments.alRight
' Response controls to right of question texts
FirstName.Style.ElementAlign = ElementAlignments.eaRight
LastName.Style.ElementAlign = ElementAlignments.eaRight
Age.Style.ElementAlign = ElementAlignments.eaRight
Gender.Style.ElementAlign = ElementAlignments.eaRight
' Drop-down list for Gender
Gender.Style.Control.Type = ControlTypes.ctDropList
As in the previous example, a question sub-template is required for placing the response controls on the same line as the question texts.
See also
