Back to limesurvey.org

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

More
11 months 1 week 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.

Partner Banner
More
11 months 1 week 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>

Here you are
 

Joffm
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
11 months 1 week ago #273194 by Jmantysalo
Replied by Jmantysalo on topic Option for sticky header for array questions, LS6
I don't get this to work. Browser issue, which one you use? Or something with the theme, with what you tested?

Please Log in to join the conversation.

More
11 months 1 week ago #273196 by Joffm
Replied by Joffm on topic Option for sticky header for array questions, LS6
Hi,
1. 6.15.5 / Firefox / vanilla
The one I showed already

2. 6.15.5 / Firefox / fruity twentythree
 

3. 6.15.5 / Chrome / fruity twentythree
 

4. 6.15.5 / Edge / fruity
 

I do not see any issues.

Joffm
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
11 months 1 week ago #273203 by Jmantysalo
Replied by Jmantysalo on topic Option for sticky header for array questions, LS6
My bad, now I got this: it is fixed relative to the table, not relative to the page. I will ask the user if this is good.

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source