Back to limesurvey.org

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)

More
7 years 3 months ago #169070 by Albinux
Text label position (multiple numerical input question type) was created 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.
More
7 years 3 months ago #169090 by tpartner
Replied by tpartner on topic Text label position (multiple numerical input question type)
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.
More
7 years 3 months ago - 7 years 3 months ago #169112 by Albinux
Replied by Albinux on topic Text label position (multiple numerical input question type)
Of course !

My LimeSurvey version is 2.72.6+171207.

The current design:


The desired design:
Last edit: 7 years 3 months ago by Albinux.
The topic has been locked.
More
7 years 3 months ago #169121 by tpartner
Replied by tpartner on topic Text label position (multiple numerical input question type)
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.
More
7 years 3 months ago #169139 by Albinux
Replied by Albinux on topic Text label position (multiple numerical input question type)
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.
More
7 years 3 months ago #169144 by holch
Replied by holch on topic Text label position (multiple numerical input question type)
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.
Help us to help you!
  • Provide your LS version and where it is installed (own server, uni/employer, SaaS hosting, etc.).
  • Always provide a LSS file (not LSQ or LSG).
Note: I answer at this forum in my spare time, I'm not a LimeSurvey GmbH employee.
The following user(s) said Thank You: r0bis
The topic has been locked.
More
7 years 3 months ago #169150 by Albinux
Replied by Albinux on topic Text label position (multiple numerical input question type)
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.
More
7 years 3 months ago #169151 by Albinux
Replied by Albinux on topic Text label position (multiple numerical input question type)
It's ok, I did it!

enquete.cortecs.org/index.php/816422?lang=fr
The topic has been locked.
More
7 years 3 months ago - 7 years 3 months ago #169167 by tpartner
Replied by tpartner on topic Text label position (multiple numerical input question type)
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: 7 years 3 months ago by tpartner.
The following user(s) said Thank You: r0bis, Albinux
The topic has been locked.
More
7 years 3 months ago #169194 by Albinux
Replied by Albinux on topic Text label position (multiple numerical input question type)
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.
More
7 years 3 months ago #169197 by tpartner
Replied by tpartner on topic Text label position (multiple numerical input question type)

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.
More
6 years 8 months ago #178461 by Albinux
Replied by Albinux on topic Text label position (multiple numerical input question type)
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.
More
6 years 8 months ago #178483 by Albinux
Replied by Albinux on topic Text label position (multiple numerical input question type)
My apologies I didn't even say hello. "Hello! "There, it's done! :)
The topic has been locked.
More
6 years 8 months ago #178491 by tpartner
Replied by tpartner on topic Text label position (multiple numerical input question type)
Add something like this to your custom.js file:

Code:
$(document).on('ready pjax:scriptcomplete',function() {
 
  // Add/remove classes
  $('.slider-left, .slider-right').removeClass('col-sm-2 col-sm-4 col-sm-6 col-sm-8 col-sm-10 col-xs-6 col-xs-12 text-right text-left visible-xs-block');
  $('.slider-container').removeClass('col-sm-2 col-sm-4 col-sm-6 col-sm-8 col-sm-10');
  $('.slider-item').addClass('custom-text-location');
  $('.slider-left, .slider-right').addClass('slider-text');
 
  // Move slider left/right text
  $('.slider-item').each(function(i) {
    $('.slider-left', this).after($('.slider-right', this));
    $('.slider-right:gt(0)', this).remove();
  });
});

Add something like this to your custom.css file:

Code:
.slider-item.custom-text-location .slider-left {
  float: left;
  width: 20%;
  min-width: 100px;
  text-align: left;
}
 
.slider-item.custom-text-location .slider-text {
  width: 20%;
  min-width: 100px;
}
 
.slider-item.custom-text-location .slider-left {
  float: left;
  text-align: left;
}
 
.slider-item.custom-text-location .slider-right {
  float: right;
  text-align: right;
}
 
.slider-item.custom-text-location .slider-container {
  clear: both;
  margin-top: 3em;
}

Note: If you have FTP access to the server, you could bypass the JavaScript requirement by customizing the question layout directly in your survey theme.
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: DenisChenu, Albinux
The topic has been locked.
More
6 years 8 months ago #178492 by Albinux
Replied by Albinux on topic Text label position (multiple numerical input question type)
Thank you! Unfortunately, it doesn't seem to work this time:

enquetes-sante-pro.univ-grenoble-alpes.f...x.php/796664?lang=en

The display remains the same as before....
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source