Hello,
for a survey I have multiple grid questons with many items. Now if you scroll down the labels of the columns aren't visible for the items.
I was able to freeze the column labels on top with the help of a table function.
However, now I have two problems:
1. The labels aren't aligned with the corresponding check boxes.
2. When I open the mobile version, the submit button isn't fixed at the bottom but appears in the middle. I want to make the questions within the grid separate questions on mobile but still have the submit button fixed at the bottom.
Thank you in advance!
-Alex
This is the code I was using:
<script>
$(document).ready(function(){
$('#GridQ_div > .question_body > table').prepend(`
<thead>
<tr>
</tr>
</thead>
`);
$('#GridQ_div > .question_body > table > tbody > tr:first-child > td').each(function(){
var tdHtml = $(this).html();
$('#GridQ_div > .question_body > table > thead > tr').append('<th>' + tdHtml + '</th>');
});
$('#GridQ_div > .question_body > table > tbody > tr:first-child').hide();
})
</script>
<style>
#GridQ_div > .question_body {
height: 200px;
}
#GridQ_div > .question_body > table {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}
#GridQ_div > .question_body > table > thead {
/* head takes the height it requires,
and it's not scaled when table is resized */
flex: 0 0 auto;
width: calc(100% - 0.9em);
}
#GridQ_div > .question_body > table > tbody {
/* body takes all the remaining available space */
flex: 1 1 auto;
display: block;
overflow-y: scroll;
}
#GridQ_div > .question_body > table > tbody > tr {
width: 100%;
}
#GridQ_div > .question_body > table > thead,
#GridQ_div > .question_body > table > tbody > tr {
display: table;
table-layout: fixed;
}
</style>