How to pin the scale points at the top of the page?

Hi there, if you still need, I was able to adapt the solution in this thread (pinned question text) for scale points. The scale points are pinned for desktop matrix tables only since the accordion format already has the scale points included.
First, in the survey's Look & Feel, change the layout to be either Flat or Classic and then change the Logo to be "Banner".
Then over in the Builder, add the below CSS to the Question Text of the Matrix question using the Rich Content Editor's HTML/Source View "<>":

Click to write the question text
Finally, add the below to the OnReady section of the question's JavaScript:
var q = jQuery("#"+this.questionId);
if(q.find('div.desktop').length > 0) jQuery('#'+this.questionId+' > div.Inner.BorderColor.Likert > div > fieldset > div > table > thead').clone().appendTo('#HeaderContainer');

@Tom_1842 Can you share the CSS code used in the solution above? Tried putting only the javascript but it is not working. Thanks!

@jwaters6 Sure thing. I added the CSS within the Question Text HTML so that it only applies to that page in the survey. The JavaScript copies and appends the scale points to the page's Header Container, and the CSS fixes the Header Container to the top of the page and styles it.

---

Then over in the Builder, add the below CSS to the Question Text of the Matrix question using the Rich Content Editor's HTML/Source View "<>":

<style type="text/css">

#SurveyEngineBody {
padding-top: 60px;
}

#HeaderContainer {
top: 0;
position: fixed;
width: 770px !important;
left: 0;
right: 0;
background: #fff;
background-color: #fff;
border-bottom: 1px solid #ddd;
margin-top: 0;
z-index: 999;
}

th {
text-align: center;
padding: 10px;
}

</style>
Click to write the question text

Finally, add the below to the OnReady section of the question's JavaScript:

var q = jQuery("#"+this.questionId);
if(q.find('div.desktop').length > 0)
jQuery('#'+this.questionId+' > div.Inner.BorderColor.Likert > div > fieldset > div > table > thead').clone().appendTo('#HeaderContainer');

---

You might also try changing the format of the matrix to Profile to ensure that the scale points are always displayed with the statements.

Thanks!! The scale is appended to the top. Want to check in to see whether it is normal to have duplicated scale points?

@jwaters6 yes that is expected - the clone() piece is making a copy of the table header but the original table header is left alone. If you want to hide the original table header, you could try changing its visibility to hidden with the below:

var q = jQuery("#"+this.questionId);
if(q.find('div.desktop').length > 0)
jQuery('#'+this.questionId+' > div.Inner.BorderColor.Likert > div > fieldset > div > table > thead').clone().appendTo('#HeaderContainer');
jQuery('#'+this.questionId+' > div.Inner.BorderColor.Likert > div > fieldset > div > table > thead').css({"visibility":"hidden"});
});

If your statements are all really long, you might also see if setting “Repeat headers” to “All” could work for your question.

I see. Thanks for the codes they are so very helpful!

How could I adapt this code to pin both the scale points and the question text? I tried a few things based on the two posts but didn’t manage to make it work.

@Caroline487 The below looks okay to me. Over in the Builder, add the below CSS to the Question Text of the Matrix question using the Rich Content Editor's HTML/Source View "<>":

<style type="text/css">

#SurveyEngineBody {
padding-top: 60px;
}

#HeaderContainer {
top: 0;
position: fixed;
left: 0;
right: 0;
background: #fff;
background-color: #fff;
border-bottom: 1px solid #ddd;
margin-top: 0;
z-index: 999;
}

th {
text-align: center;
padding: 10px;
}

@media (max-width: 770px) {
    #HeaderContainer {
        width: 100% !important;
    }
}

@media (min-width: 771px) {
    #HeaderContainer {
        width: 770px !important;
    }
}

</style>
Click to write the question text

Add the below to the OnReady section of the question's JavaScript:

var q = jQuery("#"+this.questionId);
//copy question text, hide original
jQuery('#'+this.questionId+' > div.Inner.BorderColor.Likert > div > fieldset > legend > label').clone().appendTo('#HeaderContainer');
jQuery('#'+this.questionId+' > div.Inner.BorderColor.Likert > div > fieldset > legend > label').css({"visibility":"hidden"});

//copy scale points if desktop
if(q.find('div.desktop').length > 0) {
jQuery('#'+this.questionId+' > div.Inner.BorderColor.Likert > div > fieldset > div > table > thead').clone().appendTo('#HeaderContainer');
}

Awesome, thank you so much, @Tom_1842! It looks great!