Have an idea?

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

formatting image and text items in ranking question

In a LS (9.8.0) study I have a ranking question with 4 items.

For each item I have a picture and 2 lines of text.

I want the picture to appear on the left, and the 2 lines of text to appear to the right of the image.

I want the 4 items to be aligned

I achieved this appearance when describing the items in an earlier text question by use of tables:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width:30%" align="right"> <img src="[%GraphicsPath()%]9s6.jpg" alt="" border="0">  </td>
<td style="width:70%"align="left"> <b>item 1 line 1 <br> item 1 line 2
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width:30%" align="right"> <img src="[%GraphicsPath()%]10s6.jpg" alt="" border="0"> 
</td>
<td style="width:70%"align="left"> <b> item 2 line 1 <br> item 2 line 2
</tr>
</table>


etc

This may not be elegant but it seems to work.

When I use this code - with each table as an item in the ranking question, the alignment goes awry.
The images are resized – even if I use the same image file the pictures are differently sized between items, the width assigned to the text column varies between items – end result the items are not neatly aligned /stacked up.

Any help to fix the ranking question would be much appreciated
Thanks, Dan
asked Mar 13 by dan r Bronze (2,140 points)
I haven't been able to observe the behavior you're describing on my end.  Would it be possible to share a .ssi demonstrating the problem to support@sawtoothsoftware.com?  Of course, sensitive or irrelevant information could be removed from the .ssi first.
Thanks Zachary, I'll email the file
Dan

1 Answer

0 votes
 
Best answer
Your table cell widths are being respected.  The problem is that the elements outside of the table aren't being constrained to have the same width.  Try adding this:

<style>
#[% QuestionName() %]_div .option_cell {
    width: 100%;
}
</style>
answered Mar 16 by Zachary Platinum Sawtooth Software, Inc. (143,625 points)
selected Mar 16 by dan r
Thanks, that has fixed it.
...