Have an idea?

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

Grids side by side?

I have two grids that my client would like displayed side by side (as opposed to stacked) on one page.

How do I accomplish this?
asked Dec 3, 2020 by anonymous
What exactly do you have in mind?  Are the row labels of the second grid question getting added, or just the input columns?  Do the grids always have the same number of rows so they can line up 1-to-1?  Should something special happen for mobile respondents?
This is what the client had in mind-



Programmer:  show both grids on screen at the same time
         
             Reasons to purchase from [S5a]                      Reasons to purchase from [OTHER]
Not a strong reason to purchase…                 Strong reason to purchase…     Not a strong reason to purchase…                Strong reason to purchase…

1    2    3    4    5    1    2    3    4    5


1.    Attribute/Reason…..
2.    Attribute
3.    Attribute
4.    Attribute
5.    Attribute
6.    Attribute
7.    Attribute
8.    Attribute
9.    Attribute
10.    Attribute
11.    Attribute
12.    Attribute
13.    Attribute
14.    Attribute
15.    Attribute
16.    Attribute
17.    Attribute
18.    Attribute
19.    Attribute
20.    Attribute
21.    Attribute
22.    Attribute
23.    Attribute
24.    Attribute
25.    Attribute
26.    Attribute
27.    Attribute

1 Answer

0 votes
Please place your two grid questions immediately next to each other in the survey and add this script to the first grid question:

<style>
#[% QuestionName() %]_div .inner_table > tbody > tr:first-child {
    text-align: center;
}

#[% QuestionName() %]_div .inner_table > tbody > tr > td:first-child {
    width: 10%;
}

#[% QuestionName() %]_div .inner_table > tbody > tr > td:not(:first-child) {
    width: 9%;
}
</style>

<script>
$(document).ready(function(){
    // Params
    var header1 = 'Header 1';
    var header2 = 'Header 2';

    // Run
    var qdiv1 = $('#[% QuestionName() %]_div');
    var tbody1 = $(qdiv1).find('.inner_table > tbody');
    var qdiv2 = $(qdiv1).nextAll('.grid').eq(0);
    var tbody2 = $(qdiv2).find('.inner_table > tbody');
    if ($(tbody1).length && $(tbody2).length) {
        $(qdiv2).hide();
        var cols1 = $(tbody1).find('> :first-child > td').length - 1;
        var cols2 = $(tbody2).find('> :first-child > td').length - 1;
        for (var i = 0; i < $(tbody1).children().length; i++) {
            $(tbody1).children().eq(i).append($(tbody2).children().eq(i).children(':not(:first-child)'));
        }
        $(tbody1).prepend('<tr><td></td><td colspan="' + cols1 + '">' + header1 + '</td><td colspan="' + cols2 + '">' + header2 + '</td></tr>');
    }
})
</script>


Lines 18 and 19 can be updated to change the header text added to the two parts of the resulting table.

I had to manually set the widths of the columns to make the final table look nice.  You could adjust these on lines 7 and 11.
answered Dec 4, 2020 by Zachary Platinum Sawtooth Software, Inc. (161,250 points)
Can I add a thick black border between the two grids?
The code shared by Paul Moon in your other post should be able to add such a border.
When I tried that code in the footer of my first grid (to add a right border), it kept adding it to the right side of my second grid instead....


<style>
#[% QuestionName() %]_div .inner_table > tbody > tr:nth-child(1n+0) {
    border-right: 2px solid black;
}
</style>
Why have you applied the ":nth-child" part to "tr"?  There was some "td" in the selector in the original code.  You should just need to change the exact value of ":nth-child" to get the border applied to the column you want.
I don't have very much experience with this, so I'm a little confused....
Add this to the first question:

#[% QuestionName() %]_div .inner_table > tbody > tr > td:nth-child(6) {
    border-right: 2px solid black;
}
...