Have an idea?

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

Grid Layout on Mobile/Cell

I have a slight issue with a grid layout for display on a mobile/cell phone

https://ibb.co/B4YvF44

This works fine

On a mobile/cell however I get this:

https://ibb.co/LQTNWm8

Ideally, I want to get it looking like this:

https://ibb.co/sj4gHrY

Issue here being that the dropdowns can't be split out. I've tried everything I can to no avail. Long answer short, is the only solution going to be a Free Format?
asked Nov 16 by crawliano Bronze (505 points)
Option 1 won't fly...
Option 2 I've never done
Option 3 may take a while
Option 4 could be a winner, but dropdown 1 has 4 options and dropdown 2 has 8. Will this still work?
Sure, options could be deleted if they aren't needed.  Naturally the admin module would use the original list when displaying the item label next to a respondent's choice, but the actual number stored in the data would be the one you'd expect.
OK, only other thing is how this would work with a constructed list?

The rows being displayed are chosen in the question before, so I suspect that there's going to be some sort of loop in play?
Either an explicit loop or an implicit one with jQuery, sure.  Shouldn't be a problem.
You know where this conversation is going to go...

How do I do this!?!?!

https://ibb.co/WPbw9KS

So I want to change the display on S1I2_r1_c1 thru S1I2_r15_c1 to display the first 4 options but change the display name.

Any example code would be amazing!

1 Answer

0 votes
After setting the grid question to use the list with the larger number of items (or a new list with that same number of items), add this script to the question:

<script>
$(document).ready(function(){
    // Parameters
    var columnListMap = {
        1: [% ListLabelsArray(list1) %],
        2: [% ListLabelsArray(list2) %]
    };
    
    // Run
    Object.keys(columnListMap).forEach(function(column){
        var newList = columnListMap[column];
        var dropdowns = $('select[id^="[% QuestionName() %]_"][id$="_c' + column + '"]');
        dropdowns.each(function(){
            for (var i = 0; i < newList.length; i++) {
                $(this).children().eq(i + 1).text(newList[i]);
            }
        });
        dropdowns.children(':nth-child(' + (newList.length + 1) + ')').nextAll().remove();
    });
})
</script>


"list1" and "list2" should be replaced with the names of the lists for the first and second columns, respectively.
answered Nov 16 by Zachary Platinum Sawtooth Software, Inc. (156,375 points)
I owe you a pint, this is beautiful! We're in business. Will be saving that script, it's amazing!

THANK YOU
...