Style of checkboxes with multiple columns

Question

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!

Answer 1

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>

Comments

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)