Have an idea?

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

Style of checkboxes with multiple columns

Hi there!

In one of my survey questions, I got three columns with checkboxes. The text of some checkbox options is sometimes rather long and breaks down into a second row. The problem is that the checkboxes are no longer aligned on the same height which looks weird. For example if one row with 3 options (3 columns) got 1 option with 2 lines text, and 2 options with 1 line only, the checkboxes are not vertically centered. What would be a good way to solve this?

Thank you!
asked Jan 9 by danny (320 points)

1 Answer

+1 vote
 
Best answer
Please try adding this script to your select question and see if it satisfies your needs:

<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>
answered Jan 11 by Zachary Platinum Sawtooth Software, Inc. (161,250 points)
selected 4 days ago by danny
Thank you so much Zachary for the code!

It works fine, I just had to add the following CSS code to make sure it looks smooth:

.option_column {height:auto!important}

(overriding the 100% height to make it vertically centered)
...