Skip to main content

Matrix sticky header

  • Updated

Add sticky headers globally

 
Go to the Design tab and copy the following CSS into the Survey styling container.
 
head {
background-color: white;
position: sticky;
top: 0;
z-index: 100;
}
 
msh1.png
 
Then, click the Save button in order to take effect in the entire survey.
 
msh2.png
 

Add sticky header to a specified matrix

 
Create the matrix, it can be single choice or multiple choice.
 
msh3.png
 
Open the Javascript editor, paste this code and click the save button.
 
msh4.png
 
// Variable to save your styles
var styles = `
thead {
background-color: white;
position: sticky;
top: 0;
z-index: 100;
}
`;

// Create a style DOM node
var styleSheet = document.createElement("style");
// Add the styles to the stylesheet
styleSheet.innerText = styles;
// Append the stylesheet in the head of the HTML code
document.head.appendChild(styleSheet);
 

Conclusion

 
Now you will realize that sticky headers are enabled.
 
msh5.gif