LimeSurvey forums :: Topic: Relative positioning for question index (1/1)

Welcome, Guest

TOPIC: Relative positioning for question index

Relative positioning for question index 6 months 2 weeks ago #87827

Fred
OFFLINE
Gold Donor
Posts: 162
Thank you received: 5
Karma: 3

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.

Anybody succeed in getting this to work?

The administrator has disabled public write access.

Re: Relative positioning for question index 6 months 2 weeks ago #87867

Mazi
OFFLINE
LimeSurvey Team
Posts: 5116
Thank you received: 261
Karma: 240

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)limesurvey.org'"

The administrator has disabled public write access.

Re: Relative positioning for question index 6 months 2 weeks ago #87877

Fred
OFFLINE
Gold Donor
Posts: 162
Thank you received: 5
Karma: 3

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

 
$(document).ready(function(){
 
// 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.

The administrator has disabled public write access.

Re: Relative positioning for question index 6 months 2 weeks ago #88061

tpartner OFFLINE LimeSurvey Team Posts: 2869 Thank you received: 428 Karma: 246	In 2.1 we will be moving the index below the navigator in all shipped templates - bugs.limesurvey.org/view.php?id=6793.
	Cheers, Tony LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project. The administrator has disabled public write access.

Forum

English support forums

Can I do this with LimeSurvey?

Relative positioning for question index