Welcome to the LimeSurvey Community Forum

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

Floating Header

  • boshra.m
  • boshra.m's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 11 months ago #227879 by boshra.m
Floating Header was created by boshra.m
Please help us help you and fill where relevant:
Your LimeSurvey version: [see right hand bottom of your LimeSurvey admin screen]
Own server or LimeSurvey hosting:
Survey theme/template:
==================
Hi,

I have entered this to insert a floating header: <style type="text/css" data-author="Tony Partner">
 
@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>

However because there are two headers, they seem to overlap when I scroll. Is there any way to keep it "fixed"?
Also, is there a way to show the gridlines that are present in the rest of the question?

Thank you.

     

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 11 months ago #227895 by tpartner
Replied by tpartner on topic Floating Header
We cannot help with such limited information.

You didn't answer the questions at the top of the first post so we have no clue about your LimeSurvey environment and you didn't attach a sample survey so we can't see the code used to insert the extra headers.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

  • boshra.m
  • boshra.m's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 11 months ago #228113 by boshra.m
Replied by boshra.m on topic Floating Header
Hi,

Sorry for the delayed response.

LimeSurvey Cloud Version 5.3.13
LimeSurvey Hosting
Fruity

Please find a .iss attachment below.

Please refer to the English version of the survey.

Thank you.

 

File Attachment:

File Name: Question 10.lss.txt
File Size:131 KB

Please Log in to join the conversation.

  • holch
  • holch's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 11 months ago #228114 by holch
Replied by holch on topic Floating Header

Please find a .iss attachment below.


I hope you did NOT attache the International Space Station to this thread. I am a little afraid to open that file now... ;-)

It's hopefully a .LSS file, not an .ISS file. ;-)

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

Please Log in to join the conversation.

  • boshra.m
  • boshra.m's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 11 months ago #228208 by boshra.m
Replied by boshra.m on topic Floating Header
Haha, oops!

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 11 months ago #228284 by tpartner
Replied by tpartner on topic Floating Header
Try this:

Code:
<style data-author="Tony Partner" type="text/css">
  @media only screen and (min-width: 768px) {  
    #question{QID} .answer-container {
      position: relative;
      max-height: 300px;
      overflow: scroll;
    }
 
    #question{QID} table.subquestion-list {
      text-align: left;
      position: relative;
      border-collapse: collapse; 
    }
 
    #question{QID} table.subquestion-list thead  {
      position: sticky;
      top: 1px;
      z-index: 1000;
    }
 
    #question{QID} table.subquestion-list thead th,
    #question{QID} table.subquestion-list thead td  {
      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>

Sample survey attached: 

File Attachment:

File Name: limesurvey...7815.lss
File Size:127 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: boshra.m

Please Log in to join the conversation.

Lime-years ahead

Online-surveys for every purse and purpose