Have an idea?

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

Freeze panes from second row

Hi,

I want a code to freeze the first row and remaining all the rows to be scrolled in a grid type question. Can you please help on this
related to an answer for: Freeze panes
asked Jun 19, 2017 by sravan526 (150 points)
My understanding is that that code already accomplishes that.  Are you observing some other behavior on your end?
yes, i want to freeze the pane from second row that is not to hide the column headings row and then scroll from second row is it possible
Yes, i want to just display the grid header in its place by not hiding and the remaining rows to be scrolled, is there any way doing this.

1 Answer

0 votes
 
Best answer
Try this code:

<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>


<script>
$(document).ready(function(){
    $('#GridQ_div > .question_body > table').prepend('<thead><tr></tr><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:first-child').append('<th>' + tdHtml + '</th>');
    });
    $('#GridQ_div > .question_body > table > tbody > tr:first-child').remove();
    
    $('#GridQ_div > .question_body > table > tbody > tr:first-child > td').each(function(){
        var tdHtml = $(this).html();
        $('#GridQ_div > .question_body > table > thead > tr:last-child').append('<th>' + tdHtml + '</th>');
    });
    $('#GridQ_div > .question_body > table > tbody > tr:first-child').remove();
})
</script>
answered Jun 20, 2017 by Zachary Platinum Sawtooth Software, Inc. (133,575 points)
selected Jun 21, 2017 by sravan526
Thank you Zachary, i have changed little bit and it is working fine at my end.
My corner label and column labels do not match my columns.  Not seeing how to fix this.
I'm not sure what you mean.  Do you have special grid settings in place, or have you added other code to your grid question?
James, use the same CSS, but this JavaScript:

<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:first-child').append('<th>' + tdHtml + '</th>');
    });
    $('#GridQ_div > .question_body > table > tbody > tr:first-child').remove();
})
</script>
What version of SSI Web / Lighthouse Studio are you using?
...