The LimeSurvey Fund-Raiser 2012 is complete. Thank you for donating a total of 25,000 USD!     List of donors »
Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username?
  • Page:
  • 1

TOPIC: Array/Matrix Question Design Issue

Array/Matrix Question Design Issue 2 years 3 months ago #57399

  • DPajak
  • DPajak's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 15
  • Karma: 0
I have a matrix question where I want the table to look like as in the following picture:



So there needs to be a space between the "I don't know" field and the rest. Searching the forum I found the following solution:

So the space is working perfectly:



My first question is now, how I can set the colors of the last column do be different from the rest (as in my first picture)? And my second question is, how can I adjust the width of the question/answer text in the first column?

I have tried a few thing in the template.css. but couldn't find out the right way to do it.

Thank you for any help.
The administrator has disabled public write access.

Re: Array/Matrix Question Design Issue 2 years 3 months ago #57409

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5116
  • Thank you received: 261
  • Karma: 240
1. Column color: Can you post a link to an actived survey that uses this question layout?

2. Check the advanced attributed when editing a question. There should be an "answerwidth" setting where you can assign the first column X percent of the whole width.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Array/Matrix Question Design Issue 2 years 3 months ago #57419

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 2869
  • Thank you received: 428
  • Karma: 246
1. Adding something like this to the end of template.css should do the trick with the colours in the last column:
#questionQQ .array1 .lastCell {
	background-color: #CFD0D1;
} 
 
#questionQQ .array2 .lastCell {
	background-color: #B1B3B4;
}

2. Mazi's suggestion would normally work but in this case we have reset the column widths so try something like this:
#questionQQ table.question tbody th {
	width: 20%;
}
Cheers,
Tony

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Aw: Re: Array/Matrix Question Design Issue 2 years 3 months ago #57426

  • DPajak
  • DPajak's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 15
  • Karma: 0
Thank you very much Tony.

The color issue is working, but I still have an issue with the widths.

My template.css for the widths looks like this now:
#question448 tbody th {
	width: 11%;
}
 
#question448 table.question tbody th {
	width: 34%;
}

But when I look up the source code of the question preview in my browser I can find values of 20% for the first column and 13.3% for the rest:
</script><br /><span class="questionhelp"></span></td></tr><tr><td class="answer"><table class="question" summary="Bitte geben Sie an, wie viele Ihrer ehemaligen Kollegen die folgenden Möglichkeiten während des Verlagerungsprozess hatten:
 
    $(document).ready(function() {
 
		var qID = 448;
 
		// Reset column widths
		$('#question'+qID+' col').attr('width', 'auto');
 
		// Insert new column
		$('').insertBefore('#question'+qID+' table.question thead tr th:last');
		$('#question'+qID+' table.question tbody tr').each(function(i) {
			$('td:last', this).addClass('lastCell');
		});
		$('').insertBefore('.lastCell');
 
	});
 
 - an array type question"><colgroup class="col-responses"><col class="col-answers" width="20%" /><col class="odd" width="13.3%" /><col class="even" width="13.3%" /><col class="odd" width="13.3%" /><col class="even" width="13.3%" /><col class="odd" width="13.3%" /><col class="even" width="13.3%" /></colgroup>

I am not that familiar with CSS, so your help would be again appreciated.
The administrator has disabled public write access.

Re: Aw: Re: Array/Matrix Question Design Issue 2 years 3 months ago #57459

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 2869
  • Thank you received: 428
  • Karma: 246
That script is in the summary tag and therefor is incomplete so may confuse other users. Additionally, I found a small bug with IE8 and added some more classes to aid in styling. Use this script, replacing "QQ" with your question ID:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {
 
		var qID = QQ;
 
		// Reset column widths
		$('#question'+qID+' col').css({'width': 'auto'});
 
		// Insert new column
		$('#question'+qID+' table.question thead tr th').addClass('headerCell');
		$('#question'+qID+' table.question thead tr th:last').removeClass('headerCell').addClass('lastCell');
		$('<th class="spacerCell"></th>').insertBefore('#question'+qID+' table.question thead tr th.lastCell');
		$('#question'+qID+' table.question tbody tr').each(function(i) {
			$('td', this).addClass('answerCell');
			$('td:last', this).removeClass('answerCell').addClass('lastCell');
		});
		$('<td class="spacerCell"></td>').insertBefore('#question'+qID+' table.question tbody tr td.lastCell');
 
	});
 
</script>

Here is an image showing the associated classes:
Untitled-1_2011-02-24.png


So, the following styles give the result in the image (replace "QQ" with the question ID):
#questionQQ .spacerCell {
	background-color: #FFFFFF;
	width: 2%;
}
 
#questionQQ tbody th.answertext {
	width: 25%;
}
 
#questionQQ tbody td.answerCell {
	width: 15%;
}
 
#questionQQ .lastCell {
	width: 15%;
}
Cheers,
Tony

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Aw: Re: Array/Matrix Question Design Issue 2 years 3 months ago #57462

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5116
  • Thank you received: 261
  • Karma: 240
Great screenshot, Tony. Can you add that to the according question page at the wiki?!

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Aw: Re: Array/Matrix Question Design Issue 2 years 2 months ago #57537

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 2869
  • Thank you received: 428
  • Karma: 246
Can you add that to the according question page at the wiki?
Most of these classes are inserted by the JavaScript so I don't think it would be of any value in the question page.
Cheers,
Tony

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Aw: Re: Array/Matrix Question Design Issue 2 years 2 months ago #57554

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 4423
  • Thank you received: 460
  • Karma: 167
tpartner wrote:
Can you add that to the according question page at the wiki?
Most of these classes are inserted by the JavaScript so I don't think it would be of any value in the question page.
Maybe for 1.92 it's good to have more automatic class ?

:)
The administrator has disabled public write access.

Re: Aw: Re: Array/Matrix Question Design Issue 2 years 2 months ago #57563

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 2869
  • Thank you received: 428
  • Karma: 246
Yep, more classes is better. :)
Cheers,
Tony

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Aw: Re: Array/Matrix Question Design Issue 2 years 2 months ago #57585

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 4423
  • Thank you received: 460
  • Karma: 167
tpartner wrote:
Yep, more classes is better. :)

Done : bugs.limesurvey.org/view.php?id=4984
The administrator has disabled public write access.
  • Page:
  • 1
Moderators: DenisChenu, ITEd
Time to create page: 0.380 seconds
Donation Image