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.

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 bottomIncrease 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.

How to keep horizontal multiple choice options equal width?

How to keep horizontal multiple choice options equal width? | XM Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded