Have an idea?

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

Grid Column Labels on Mobile

Hi everyone,
Zachary kindly helped with programming a grid countdown constant sum question, which works very well.
 
Unfortunately, I am currently struggling with the mobile layout of this question. The additional countdown column, that is added with the script, looks fine in the mobile layout. The column label is neatly above the cell.
However, the column labels of the two input cells, to which the script appends the cell, are strangely below the input cells.

In the 'Format' tab, I selected the option 'Rows become separate questions on mobile'.

Is there anything I could add to the script to align the column labels?

Thanks a lot for your help in advance!
related to an answer for: Countdown Constant Sum in Grid question
asked Nov 17, 2021 by Henny (255 points)

1 Answer

+1 vote
 
Best answer
I'm not sure why they decided to give mobile grids that behavior.  Try adding this after my other script and see if it gets you close to what you want:

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div .mobile_grid_options').each(function(){
        var mobileGridOptions = this;
        var table = $('<table></table>');
        $(mobileGridOptions).children().each(function(){
            var inputTd = $('<td></td>');
            $(inputTd).append($(this).find('input'));
            var labelTd = $('<td></td>');
            $(labelTd).append($(this).find(':not(input)'));
            var tr = $('<tr></tr>');
            $(tr).append(labelTd).append(inputTd);
            $(table).append(tr);
        });
        $(mobileGridOptions).empty();
        $(mobileGridOptions).append(table);
    });
})
</script>
answered Nov 17, 2021 by Zachary Platinum Sawtooth Software, Inc. (206,100 points)
selected Nov 17, 2021 by Henny
Great, that is exactly what I was looking for!

Thank you so much! :)
...