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. (123,525 points)
selected Jun 21, 2017 by sravan526
Thank you Zachary, i have changed little bit and it is working fine at my end.
...