My question is currently configured as follows:
This is how I would like it to appear on the survey itself; particularly important is the fact that each response option is equivalent in width. Instead, when I click Preview, I see the following:
Here, the response option boxes are different widths. I would like to prevent this. What settings must I change to get the desired result?
As a side note, I would be equally satisfied if the "Not at all", "Neutral" (etc) labels were displayed above the "1", "4" (etc) response option boxes rather than within those boxes; presumably if that was the case, the boxes would default to the same width.
Page 1 / 1
Hi adamyoung ,
You should be able to achieve what you described in your side note by using a Matrix Table with just one Statement row, and adding Labels; see below.
Hi Matthew, thanks for the response. The downside to this workaround is that it forces an awkward provision of a "Choice 1" row label where this would not be desired, and lead a less clear wording of the question.
In my opinion, keeping response options the same width would be necessary at all times. I would wager that having some options bigger than others will bias data collection. It is surprising and disappointing that the more appropriate method (equal width) is not so easily obtained.
In the horizontal arrangement, each option is placed inside a table cell. The width of this cell this determined by the width of the question container and the number of cells. However, cells are allowed to expand, if their text doesn't fit within the given width. Therefore, if all cells have content of the same size, then all cells will be of the same size, however, as in your case, if some cells have content which requires more width, the cells will expand to adjust it. I agree that there should be an easy toggle that allows one to enforce equal width of the options, however, the current arrangement also has its advantages, such as easily scaling to different screen sizes etc.
Therefore, at the core of it, your problem arises because you have texts of unequal length. There are three ways in which you can go about addressing it:
- Increase the overall width of your table with something like this:
.Skin .QuestionBody table.ChoiceStructure{ width: 1200px !important;}This will increase the width of each cell to accommodate your text and incase there is content left over, you'll get a scroll bar at the bottom - Increase the width of the Question Container. I feel that generally, there is too much padding around the questions, so I've added this line to my theme. This increases how wide the questions are. Allowing the table to also expand and hence increase the width of the cells:
.SkinInner { max-width: 100% !important; width:auto !important;} - Lastly, you could look at reducing the font size to allow the text to stay inside the predefined cell. This is best achieved by using a relative unit like vw or em. Something like:
td { font-size: .82em;}Read more here.
All of these will go into your question HTML inside the style tag.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.