Vertically Align Input Fields

A typical survey question consists of a title and an input field. When the title is placed to the left of the input field, the available width within the question box is divided between them. Shorter titles leave more space for the input field, while longer titles reduce its width. As a result, input fields may vary in length and appear untidy and misaligned. This is most noticeable when survey elements are stacked in one or more columns. To create a cleaner, more structured layout, you can vertically align input fields, as shown in this demo.

Follow the steps below to vertically align input fields:

1. Position question titles on the left.
   Question titles appear above input fields by default. To left-align the titles, assign "left" to the titleLocation property for an individual question or to the questionTitleLocation for a panel, page, or survey. A lower-level setting (for example, of a panel) overrides higher level-settings (for instance, of a page and survey).

2. Specify a uniform question title width.
   You can unify the width of all input fields within a nesting element by setting a common width value for their titles. To do this, specify the questionTitleWidth property for the page or panel that contains the questions whose input fields you want to align.

Refer to the survey JSON schema for a code example.