Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Adjust width in Array answer options

  • msalum1
  • msalum1's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
1 month 1 day ago - 1 month 1 day ago #268046 by msalum1
Adjust width in Array answer options was created by msalum1
[object Object] Please help us help you and fill where relevant:
LimeSurvey version: LimeSurvey Community Edition  
Version 6.6.8 241104 
Own server or LimeSurvey Cloud: Owned server  (by school) 
Survey theme/template: Fruity TwentyThree 
==================

Hello,  

I need some help to adjust column of an array question. Would it be possible to adjust the width  at column 2 and 11? I am attaching the screenshot (and sample survey) on how my survey looks like. 

I tried the following code at question source code, but I did not see any adjustment. 
<style type="text/css">table.subquestion-list thead .column-0 { width: 23%; }
table.subquestion-list thead .column-1 { width: 6%; }table.subquestion-list thead .column-2 { width: 6%; }
table.subquestion-list thead .column-3 { width: 6%; }table.subquestion-list thead .column-4 { width: 6%; }
table.subquestion-list thead .column-5 { width: 6%; }table.subquestion-list thead .column-6 { width: 6%; }
table.subquestion-list thead .column-7 { width: 6%; }table.subquestion-list thead .column-8 { width: 6%; }
table.subquestion-list thead .column-9 { width: 6%; }table.subquestion-list thead .column-10 { width: 23%; }
</style>

I also followed Joffm’s post on this thread  ([url] forums.limesurvey.org/forum/design-issue...ls-in-answer-choices [/url]) but it was not successful.   

I would appreciate your response.Many thanks!  


Marlo 


 
Last edit: 1 month 1 day ago by msalum1. Reason: attachment

Please Log in to join the conversation.

  • msalum1
  • msalum1's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
1 month 1 day ago #268047 by msalum1
Replied by msalum1 on topic Adjust width in Array answer options
Here's the attachment. 

File Attachment:

File Name: limesurvey...1-25.lss
File Size:29 KB
 [

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 month 1 day ago - 1 month 1 day ago #268048 by Joffm
Replied by Joffm on topic Adjust width in Array answer options
Hi, there is neither the script nor the css in your lss export.

So we can't see what you did wrong.

But one issue I see. You do not have columns from 0 to 10 as in your css, but from 0 to 11.
Obviously you missed that column-0 refers to the subquestion text column.

In my "old" post I omitted this (started from column-1) - only to get the relative widths of the scale items and keep the "auto" width (that you see in the first line of the css)

So please send what you really tried.
Because

but it was not successful.  

is not a clear description of your issue.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 1 month 1 day ago by Joffm.

Please Log in to join the conversation.

  • msalum1
  • msalum1's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
1 month 1 day ago #268049 by msalum1
Replied by msalum1 on topic Adjust width in Array answer options
Thanks for your reply, Joffm. 

I just modifed my code, but still my tables did not re-adjust. I'm  not sure if I am missing anything. Here's the code I used: 

<style type="text/css">
table.subquestion-list thead .column-1 { width: 23%; }
table.subquestion-list thead .column-2 { width: 6%; }
table.subquestion-list thead .column-3 { width: 6%; }
table.subquestion-list thead .column-4 { width: 6%; }
table.subquestion-list thead .column-5 { width: 6%; }
table.subquestion-list thead .column-6 { width: 6%; }
table.subquestion-list thead .column-7 { width: 6%; }
table.subquestion-list thead .column-8 { width: 6%; }
table.subquestion-list thead .column-9 { width: 6%; }
table.subquestion-list thead .column-10 { width: 6%; }
table.subquestion-list thead .column-11 { width: 23%; }
</style>

I  am also attaching the survey in here: 
 

File Attachment:

File Name: limesurvey...39-3.lss
File Size:29 KB


Thanks again for your time.   

 

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 month 1 day ago - 1 month 1 day ago #268052 by Joffm
Replied by Joffm on topic Adjust width in Array answer options
Hi,
in your question I see only this
 

Where is this script?
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>

You see that a new class "custom-array" is added, and here also the numbering of the columns takes place
Did you insert it?

And your css snippet does neither set the widths initially to "auto" nor does it refer to this class "custom array".



I see that you use a school instalation.
Are you sure you are allowed to use javascript?

Well, after inserting the script and setting the width to "auto" there is this.
 

Not really what you would like to have.
Why?
Because you still did not set the width of "column-0, the subquestion text column
Doing this
Code:
<style type="text/css">table.subquestion-list col {
    width: auto !important;
  }
 
.custom-array table.subquestion-list thead .column-0 { width: 22%; }
.custom-array table.subquestion-list thead .column-1 { width: 12%; }
.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: 6%; }
.custom-array table.subquestion-list thead .column-8 { width: 6%; }
.custom-array table.subquestion-list thead .column-9 { width: 6%; }
.custom-array table.subquestion-list thead .column-10 { width: 6%; }
.custom-array table.subquestion-list thead .column-11 { width: 12%; }
</style>

you get
and as @holch already wrote The header like this looks much better
 

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 1 month 1 day ago by Joffm.
The following user(s) said Thank You: DenisChenu

Please Log in to join the conversation.

  • msalum1
  • msalum1's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
1 month 12 hours ago #268073 by msalum1
Replied by msalum1 on topic Adjust width in Array answer options
Thanks for mentioning the Javascript permission. Our superadmin just told me that my account is not permitted to use Javascript by default, but I'm now allowed to use it. I copied and tried the codes you wrote below, and my survey looks much better now. I appreciate your help and of Holch! 


M. 
The following user(s) said Thank You: jonas.jau

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source