Grid Column Labels on Mobile

Question

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!

Answer 1

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>

Comments

Great, that is exactly what I was looking for!

Thank you so much! :)