Have an idea?

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

freeformat question with graphical buttons is not laying out correctly

I'm using the following html in a free format question:
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,1)%]Advertising or Promotions Manager</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,2)%]Art Manager/Art Director</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,3)%]Creative Manager/Creative Director</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,4)%]Desktop Publisher</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,5)%]Graphic Designer/Illustrator</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,6)%]Photographer (Professional Photographer)</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,7)%]Print Production Worker/Manager/Director</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,8)%]Print Service Provider</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,9)%]Print or Publishing Editor</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,10)%]Publisher (Books, Magazines, Catalogs)</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,15)%]Other Design not listed above (incl. artist, fashion/interior/commercial design, etc., please specify)<br><input type="text" size="30" name="Q4_other1" onKeyUp="SSI_SetSelect('Q4_a_15', true);document.mainform.Q4_other2.value='';document.mainform.Q4_other3.value='';document.mainform.Q4_other4.value='';document.mainform.Q4_other5.value=''"></li>

When the page is displayed, the radiobuttons are on 1 line and the answer option is on the next.

Anyone have any idea why? and how I can fix it?

asked May 19, 2017 by jas8278 Bronze (750 points)

1 Answer

0 votes
The radio buttons are set to block display by default, forcing the labels to appear on a separate line.  Try adding this CSS to the free format:

.clickable .radiobox {
    display: inline-block;
answered May 20, 2017 by Zachary Platinum Sawtooth Software, Inc. (159,750 points)
Worked like a charm - thanks Zachary!
ooops - jumped the gun.

It displays great - but when you click on an option, it jumps to 2 lines again.
Whoops.  We need ".graphical_select" instead:

.clickable .graphical_select {
    display: inline-block;

Thank you so much.