How to adjust for constructed lists in column widths

Question

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?

Answer 1

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.

Comments

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.