Welcome to the LimeSurvey Community Forum

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

Auto resize labels in answer choices

eceakca
Topic Author
Offline
New Member

More

6 years 5 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
Offline
LimeSurvey Community Team

More

6 years 5 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.

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 topic has been locked.

Joffm
Offline
LimeSurvey Community Team

More

6 years 5 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

s1_2020-04-30.PNG

The following user(s) said Thank You: tpartner

The topic has been locked.

eceakca
Topic Author
Offline
New Member

More

6 years 5 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
Offline
LimeSurvey Community Team

More

6 years 5 months ago - 6 years 5 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: 6 years 5 months ago by Joffm.

The topic has been locked.

eceakca
Topic Author
Offline
New Member

More

6 years 5 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
Offline
Junior Member

More

6 years 4 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.