Hi all ... I use this code when I program a select question and want the response options to sit in multiple columns. It's Zachary's work and looks great on desktop when some options are long and wrap. Everything lines up. BUT it doesn't play nice on a mobile device. The text spills out of its box and the options don't line up like they do on desktop.
Anyone got a tweak so that I can use this for both device agnostic surveys and desktop only?
[code]
<script>
$(window).on('load', function(){
var adjustSizes = function(){
$('#[% QuestionName() %]_div .clickable').height('auto');
if ($('#[% QuestionName() %]_div .response_column:nth-child(1)').position().top == $('#[% QuestionName() %]_div .response_column:nth-child(2)').position().top) {
for (var row = 1; row <= $('#[% QuestionName() %]_div .response_column:first-child .clickable').length; row++) {
var clickables = $('#[% QuestionName() %]_div .response_column > .clickable:nth-child(' + row + ')');
var maxHeight = 0;
$(clickables).each(function(){
maxHeight = Math.max(maxHeight, $(this).height());
});
$(clickables).height(maxHeight);
}
}
};
$(window).resize(adjustSizes);
adjustSizes();
})
</script>
<style type="text/css">
.option_column {height:auto!important}
#[% QuestionName() %]_div .response_column {
width: 45%;
}
</style>
[/code]