Check out the LimeSurvey source code on GitHub!

Relative positioning for question index

4 years 2 months ago #87827 by Fred01
In the templates I looked at the question index seems to be positioned absolutely to the right and top. As a result you end up with either too much space between the questions and the index or the index overlaps the questions when at smaller browser sizes.

I'd rather have it docked next to the questions and float along with them as the browser gets wider or narrower.

Float doesn't seem to work though because of where the index is inserted in the document flow (at the end)

I've tried using relative positioning, pushing the index 750px or so from the left, then using jquery css() to get the height of the survey container and then push the index up that far. However, the footer keeps expanding as the index grows. :angry:

Anybody succeed in getting this to work?

Please Log in to join the conversation.

4 years 2 months ago #87867 by Mazi
I have fought with that problem, too, but wasn't very successful either. I succeeded to place the question index on top, below the survey title by using some jQuery.

Having the question index floating on the left is not that easy for the reasons you already mentioned. That's why for all professional Limesurvey Templates offered at the Limesurvey Template Shop I added the index at the bottom which causes no problems to other survey elements.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)'"

Please Log in to join the conversation.

4 years 2 months ago #87877 by Fred01
I tinkered around some more and this is the best I have come up with so far.

1) Start with the limeinspired template.

2) Edit the template.css as follows
#index {
  position: relative;
  left: 750px;
  width: 15em;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
  background: white;
  border-left: 1px solid #00677D;
#index .container {
  width: 15em;

3) Add this script to the endpage.pstpl
// Line up the top of the index to the survey name
var indexTop = $('#index').position().top
var snTop = $('.surveyname').offset().top;
var setIndexTop = -(indexTop - snTop);
$('#index').css('top' , setIndexTop+'px');
// add 10px to the index height so there is some bottom margin
var indexHeight = $('#index').height();
var setIndexHeight = indexHeight +10;
$('#index').css('height' , setIndexHeight+'px');
// Shrink the survey-main div by the height of the index; otherwise whitespace will fill the bottom as the index grows
var surveyHeight = $('.survey-main').height();
var setSurveyHeight = surveyHeight - setIndexHeight;
$('.survey-main').css('height' , setSurveyHeight+'px');

It seems to work pretty well. The index is docked to the right and lined up with the survey title and doesn't spill into the survey when the browser window is smaller.

Please Log in to join the conversation.

4 years 2 months ago #88061 by tpartner
In 2.1 we will be moving the index below the navigator in all shipped templates - .

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.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form