Have an idea?

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

How to force even spacing/column width on Select question with multiple columns?

I have a Select question type with 35 options that I want to display across four columns. I have set the number of columns on the Settings tab to 4 but the width of each column is sized to fit the width of the longest answer in that column, causing the columns to be of various sizes. How can I force all columns to be the same width within the Select question type?
asked Jun 6, 2017 by Brianna Boyer (205 points)

1 Answer

+2 votes
 
Best answer
Try adding this CSS to your select question:

<style>
#[% QuestionName() %]_div .response_column {
    width: 25%;
}
</style>
answered Jun 6, 2017 by Zachary Platinum Sawtooth Software, Inc. (84,025 points)
selected Jun 8, 2017 by Brianna Boyer
Thanks Zachary. I'll give it a try also. One of those outstanding cosmetic issues that looks better with your magic touch.
Perfect, thanks Zachary!
Hi Zachary, this looks fine on a desktop / laptop but it dislodges the look on a mobile / tablet.

I fiddled with some mobile settings but failed to have it work for the smaller devices?

Any suggestions?

Thanks.
I could have sworn I tested mobile select last night.  Regardless, this alternative makes the CSS conditional on the question not being in mobile mode:

<script>
$(document).ready(function(){
    if (!$('#[% QuestionName() %]_div .mobile_select').length) {
        $('#[% QuestionName() %]_div .response_column').css('width', '25%');
    }
})
</script>
Delightful Mr Anderson!

That looks much better.

As usual, a superb solution in a timely manner with a dose of generosity thrown in. Good onya mate.
...