Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Auto resize labels in answer choices

  • eceakca
  • eceakca's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 7 months ago #198380 by eceakca
Auto resize labels in answer choices was created by eceakca
Hello everyone,
My question probably has a very simple solution but I cannot find it anywhere. I ask a question as array type. In answer options I have labels. since my label is a little bit long, when I show it on the screen it divides the text. For example, the label is "Don't agree". And when I change the screen size during the survey, it looks like
"Don't agr
ee".
So is it possible to auto readjust the font of the text into the field, or maybe auto resize the width or hight of the column size. I added a screen view as well. It might be clear to show.
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 7 months ago #198394 by holch
Replied by holch on topic Auto resize labels in answer choices
No, I don't think this is possible.

But one hint for your scale looking better:

As all numbers despite the 1 and the 7 are aligned at the bottom, I would use something like:
Code:
Don't agree</br>1

Instead of:
Code:
1 - Don't agree

Because it will show all numbers aligned at the bottom and the texts above. Just looks nicer.
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 7 months ago #198406 by Joffm
Replied by Joffm on topic Auto resize labels in answer choices
Hi,
with this javascript
Code:
<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Add a question class
    thisQuestion.addClass('custom-array');
 
    // Column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
   });
</script>
and this css
Code:
<style type="text/css">.custom-array table.subquestion-list col {
    width: auto !important;
  }
 
   .custom-array table.subquestion-list thead .column-1 {width: 15%; }
  .custom-array table.subquestion-list thead .column-2 {width: 6%; }
  .custom-array table.subquestion-list thead .column-3 {width: 6%; }
  .custom-array table.subquestion-list thead .column-4 {width: 6%; }
  .custom-array table.subquestion-list thead .column-5 {width: 6%; }
  .custom-array table.subquestion-list thead .column-6 {width: 6%; }
  .custom-array table.subquestion-list thead .column-7 {width: 15%; }
</style>

you can adjust the size of each column



And - as holch - insert linefeeds <br>

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
The following user(s) said Thank You: tpartner
The topic has been locked.
  • eceakca
  • eceakca's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 7 months ago #198433 by eceakca
Replied by eceakca on topic Auto resize labels in answer choices
you are amazing Joffm :) It seems really nice. But your answer gives me 2 questions :)
First should I add 2 parts, both javascript and CSS?
Secondly I have no idea where can I write these scripts? or how can I reach these script informations? The whole day I was just googleing "How can I change CSS file in Lime Survey?" And I still don't know how to open these scripts. As you can see I am a total newby.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 7 months ago - 4 years 7 months ago #198438 by Joffm
Replied by Joffm on topic Auto resize labels in answer choices
Hi,
in this case, Google is never your friend.

What do you do?

That's all.

First should I add 2 parts, both javascript and CSS?

If not, it was useless to show them. ;)

And I still don't know how to open these scripts

You copy these two snippets and paste them into your question text (in source code mode).
The same as you'd copy any other text.
Or what do you mean by "open these scripts"?


And of course you may adapt the values in the css to your desire.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 4 years 7 months ago by Joffm.
The topic has been locked.
  • eceakca
  • eceakca's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 7 months ago #198446 by eceakca
Replied by eceakca on topic Auto resize labels in answer choices
I did exactly what you said :) I copied two scripts into source code part. It shows perfectly :)
At first I tought I have to change CSS documents, that is why I was worried. Now,as long as it works i am okay :) Thank you very much for your help.
The topic has been locked.
  • GuernseyResearch
  • GuernseyResearch's Avatar
  • Offline
  • Junior Member
  • Junior Member
More
4 years 7 months ago #199000 by GuernseyResearch
Replied by GuernseyResearch on topic Auto resize labels in answer choices
reduce the width of the question area
for version 3 - edit - display -(sub-)question width

If you make that smaller, but still fit your question, it will give you more room for the answer titles
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