Since you need to do this with several questions, I have opted for a JavaScript approach instead of CSS. It can be used in any group with the following conditions/caveates:
- The survey is in group by group mode
- There can only be array questions or text display questions in the group
- All Arrays will be aligned side-by side
1)
Set up your survey to use JavaScript
.
2) Add the following script to the source of one of the questions in a group.
The script wraps all questions that are not text-displays in a div element and aligns them side-by-side. There are some styles applied to the questions - these are for the default template but can be modified for other templates.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Loop through all questions (except boilerplates) and add some classes
$('div[id^="question"]').each(function(i){
if (!$(this).hasClass('boilerplate')) {
$(this).addClass('inlineQuestion');
if(i < 1) {
$(this).addClass('inlineQuestionPrime');
}
else {
$(this).addClass('inlineQuestionSub');
}
}
});
// Wrap the questions in a div
$('.inlineQuestion').wrapAll('<div class="inlineWrapper" />');
// Remove the text from the secondary questions
$('.inlineQuestionSub th.answertext').text('');
// Apply some styles (these are for the default template)
$('.inlineQuestion').css({ 'float': 'left' });
$('.inlineQuestion col, .inlineQuestion th.answertext').css({ 'width': 'auto' });
$('.inlineQuestion .question-wrapper').css({ 'width': '100%' });
$('.inlineQuestion td.answer').css({ 'padding': '0.5em 0' });
$('.inlineQuestion td.questiontext').css({ 'text-align': 'center' });
// Center the wrapper div
var wrapperWidth = 0;
$('.inlineQuestion').each(function(i){
wrapperWidth = wrapperWidth + $(this).width();
var padLeft = $('.answertext:eq(0)', this).width() + 3;
$('.questiontext', this).css({ 'padding-left':padLeft+'px', 'padding-right':'3px' });
});
$('.inlineWrapper').css({ 'width':wrapperWidth+'px', 'margin': '0 auto' });
});
</script>
Here is your sample survey with 2 groups. The script is in the source of the first array in each group.
And the result...
Topic Author
