Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Option for sticky header for array questions, LS6

Jmantysalo
Topic Author
Away
Platinum Member

More

6 hours 14 minutes ago #273186 by Jmantysalo

Option for sticky header for array questions, LS6 was created by Jmantysalo

We use LimeSurvey Community Edition Versio 6.15.24+251117, i.e. just upgraded to the newest. I want to make an option for our own theme for fixed headers on array questions and hence I will modify config.xml. However, I got stuck already with CSS. To custom.css I added

Code:

table.ls-answers thead th {

Code:

position: sticky !important;

Code:

top: 0 !important;

Code:

background: #ff0000 !important;

Code:

And headers are now red, so selectors work and CSS is applied. However header row is not sticky. Some pages say that there might be overflow:hidden in some parent element. Is this the right path in the first place? If so, what to try next?

Please Log in to join the conversation.

Joffm
Away
LimeSurvey Community Team

More

3 hours 53 minutes ago #273188 by Joffm

Replied by Joffm on topic Option for sticky header for array questions, LS6

Hi,
there is an "old" topic
[url] forums.limesurvey.org/forum/can-i-do-thi...-fixing-added-header [/url]
You may neglect the scripts to insert the comment column and the subheader, only use the css

Code:

<style data-author="Tony Partner" type="text/css">
  @media only screen and (min-width: 768px) {    
        #question{QID} .answer-container {
            position: relative;
            max-height: 500px;
            overflow: scroll;
        }
 
        #question{QID} table.subquestion-list {
            text-align: left;
            position: relative;
            border-collapse: collapse; 
        }
 
        #question{QID} table.subquestion-list thead th,
        #question{QID} table.subquestion-list thead td    {
            position: sticky;
            top: 1px;
            z-index: 1000;
            background: #DDDDDD;
            border: 0 none;
            box-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
        }
 
        #question{QID} table.subquestion-list .ls-heading-repeat {
            display: none;
        }
    }
</style>