Welcome to the LimeSurvey Community Forum

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

Text label position (multiple numerical input question type)

  • Albinux
  • Albinux's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 5 months ago #169070 by Albinux
Hello,

In the questionnaire I'm developing, I use some multiple numerical input questions that I set up to have a continuum + slider with a label text on the right and a label text on the left. These two label texts appear strictly to the right and left of the right and left side borders of the continuum. Ideally, I would like these label texts to appear centered above their respective side borders. Could you direct me towards the type of manipulation to carry out?

Thank you very much!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 5 months ago #169090 by tpartner
No, not without knowing your LimeSurvey version and seeing a live example.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Albinux
  • Albinux's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 5 months ago - 6 years 5 months ago #169112 by Albinux
Of course !

My LimeSurvey version is 2.72.6+171207.

The current design:


The desired design:
Last edit: 6 years 5 months ago by Albinux.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 5 months ago #169121 by tpartner
By "seeing a live example", I mean a link to an activated test survey so we can see the HTML and associated styles.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Albinux
  • Albinux's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 5 months ago #169139 by Albinux
Live example here:

enquete.cortecs.org/index.php/816422?lang=fr

Connection token:

Qr7zrNsYsicc8WO

(Maybe it is possible to do otherwise to provide a live example but I don't know how.)
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 5 months ago #169144 by holch
I hope you gave this token quite a few "uses left" in the token table, otherwise it might only be accessible once and until Tpartner makes it, others might have used the link already and can't access anymore. Ideally you always post links that do not use tokens.

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

The following user(s) said Thank You: r0bis
The topic has been locked.
  • Albinux
  • Albinux's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 5 months ago #169150 by Albinux
Yes, I just tested it. You can only use the token once! :(
I don't know how else to do it, but I'll get right on it.
Thank you very much for your vigilance.
The topic has been locked.
  • Albinux
  • Albinux's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 5 months ago #169151 by Albinux
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 5 months ago - 6 years 5 months ago #169167 by tpartner
You will need to move the elements with JavaScript and then style them with CSS.

1) Add this to template.js:

Code:
$(document).ready(function() {
 
  // Add class(es)
  $('.slider-container').addClass('custom-text-location');
 
  // Move slider left/right text
  $('.slider-container').each(function(i) {
    $('.slider-left-span', this).removeClass('pull-left col-xs-12 col-sm-3').appendTo($('div:eq(0) div:eq(0)', this));
    $('.slider-right-span', this).removeClass('pull-right col-xs-12 col-sm-3').appendTo($('div:eq(0) div:eq(0)', this));
  });
});


2) Add this to template.css:

Code:
.slider-container.custom-text-location {
  margin-top: 3em !important;
  padding-top: 60px;
}
 
.slider-container.custom-text-location > div > div {
  position: relative;
  float: none;
  margin: 0 auto;
}
 
.slider-container.custom-text-location > div > div span {
  position: absolute;
  bottom: 70px;
  width: 100px;
  text-align: center;
}
 
.slider-container.custom-text-location > div > div span.slider-left-span {
  left: 0;
  margin-left: -35px;
}
 
.slider-container.custom-text-location > div > div span.slider-right-span {
  right: 0;
  margin-right: -35px;
}
 
@media (max-width: 768px) {
 
  .slider-container.custom-text-location > div > div span.slider-left-span {
    margin-left: -15px;
    text-align: left;
  }
 
  .slider-container.custom-text-location > div > div span.slider-right-span {
    margin-right: -15px;
    text-align: right;
  }
}


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 6 years 5 months ago by tpartner.
The following user(s) said Thank You: r0bis, Albinux
The topic has been locked.
  • Albinux
  • Albinux's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 5 months ago #169194 by Albinux
It's working perfectly. However concerning the second point, it is in the file template.css and not template.js that the code must be added.

A huge thank you tpartner for this precious work! :)
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 5 months ago #169197 by tpartner

However concerning the second point, it is in the file template.css and not template.js that the code must be added.

Oops, sorry, I have fixed that typo.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Albinux
  • Albinux's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
5 years 10 months ago #178461 by Albinux
I have just experienced a rather "dramatic" situation: my survey had been launched for 3 weeks when the IT services of my university decided to change the version of Limesurvey without warning...

One of the consequences is that I lost the custom model I had created, including suggestions from tpartner to obtain the desired result described at the beginning of this discussion thread (see the second message from the beginning).

My current version of Limesurvey is now version 3.15.5+181115.

Here is also a live example of the item as it is currently: enquetes-sante-pro.univ-grenoble-alpes.f...x.php/796664?lang=fr

How can I get the result of the old version again (with the gauge centered under the question text)?

Thank you very much!
The topic has been locked.
Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose