Have an idea?

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

How to adjust for constructed lists in column widths

I have a table that builds the columns from a constructed list.  When most of the columns are showing it looks fine, but when there are only 2 or three columns showing, the spacing is extremely wide.  Is there a way to auto-adjust the table width based on how many columns are showing?
asked Nov 20, 2017 by jas8278 Bronze (750 points)

1 Answer

0 votes
Use code like this in your grid question:

<script>
$(document).ready(function(){
    switch ([% ListLength(list1) %]) {
        case 1:
            $('#[% QuestionName() %]_div .inner_table').css('width', '40%');
            break;
        case 2:
            $('#[% QuestionName() %]_div .inner_table').css('width', '60%');
            break;
        case 3:
            $('#[% QuestionName() %]_div .inner_table').css('width', '80%');
            break;
    }
})
</script>


"list1" must be replaced with the name of the list of columns.  The switch statement can be updated with different widths depending on the number of column items.
answered Nov 20, 2017 by Zachary Platinum Sawtooth Software, Inc. (67,300 points)
Thanks Zachary - I'll give this a try!
This isn't working for me. The 'switch' is picking up the correct listlength, but the inner_table source code still shows 100% all the time.
What version of SSI Web / Lighthouse Studio are you on?
I'm using v9.3
I have just tried my code in v9.3.1 and it appeared to work correctly for me.  My one-column grid question looks significantly different when I include my code than when I do not.  Is that not what you are observing?
No change in the table width at all and I have double checked that there isn't any formatting set in the grid question.

my code is:
<script>
$(document).ready(function(){
    switch ([% ListLength(Q31dColShow) %]) {
        case 1:
            $('#[% QuestionName() %]_div .inner_table').css('width', '30%');
            break;
        case 2:
            $('#[% QuestionName() %]_div .inner_table').css('width', '40%');
            break;
        case 3:
            $('#[% QuestionName() %]_div .inner_table').css('width', '50%');
            break;
    }
        case 4:
            $('#[% QuestionName() %]_div .inner_table').css('width', '60%');
            break;
    }
        case 5:
            $('#[% QuestionName() %]_div .inner_table').css('width', '70%');
            break;
    }
        case 6:
            $('#[% QuestionName() %]_div .inner_table').css('width', '80%');
            break;
    }
        case 7:
            $('#[% QuestionName() %]_div .inner_table').css('width', '100%');
            break;
    }
})
</script>
Remove lines 13, 17, 21, and 25.  The switch statement requires only one close brace at the end of all cases.
ugh . . . head-slap! Copy & paste error!

Thanks Zachary! it's working great now.
...