Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

How to avoid picture resizing depending on label length?


We're programming a MaxDiff survey in Lighthouse 9.8.1 with both pictures and their labels. We noticed that the longer the label is, the bigger the photo displayed, which naturally boosts the attraction of items with lengthy labels.  We would like the pictures to be shown more or less evenly, at least in terms of width, regardless of the label length

Our ideas:
1. Add "&nbsp" to shorter labels as many times as needed to obtain identical label lengths across the lists (not a very elegant method)

2. Fix sizes of pictures manually, e.g.
<img src="[%GraphicsPath()%] picture_name.jpg" alt="" border="0"width=100 height=200> (still tedious, as each picture has a different shape - some are rectangles, the other are squares, and we do get some answers from mobile respondents)

3. Use one of more automatized methods to ensure even width of each column
<img src="[%GraphicsPath()%] picture_name.jpg" alt="" border="0"max-width="auto">

Would you recommend one of the above or something else?

Thank you in advance
asked Jun 18 by Piotr_J (225 points)
The first option may work, but it's not elegant like you mention.

The second option is simple enough.  If you just set the widths, the heights should scale automatically.  The one downside is that you probably want images to display as wide as they can for the current screen.  So a constant width would likely mean either making images a bit too big for mobile respondents or a bit to small for desktop respondents.  If you wanted to get fancy, you could change the fixed width based on screen size using JavaScript / Sawtooth Script.

Your third option strikes me as more elegant than the other two, though.  I would recommend testing that solution out on the different browsers you want to support; if the resulting pictures look good, I'd go for that.

If there is a browser that doesn't cooperate, a fourth option might be to use JavaScript to measure the widths of each image and then set all widths to be equal to the smallest one.  Not as clean as your third option, but it's another option.

Your solution to the original question

Please only use this to answer the original question. Otherwise please use comments.
Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

To avoid this verification in future, please log in or register.