Hello everyone!

I am new to LM and learning Thank you for your time.

I am trying to design a double array table, but the sub-questions column is so narrow that each questions can take up to 7-8 lines, which makes the reading very difficult. I have tried different numbers in the "(Sub-) question width:" option, but at the end it doesn’t change the sub-questions column width. I guess I will have to modify the template? I would like to extend the sub-questions columns (2-3 times wider than it is right now) and, if possible, reduce the width of the 14 answers columns.

Survey’s template: Ubuntu_orange
LM: Version 2.51.4+160908

Here is an example of the question:

I see your problem here and yes, this is very little space for the subquestions. But to be honest, I don't see how to make the other columns smaller, they are already quite tight together and if they get any closer, it will start to get difficult to answer.

Problem solved! I had to add this code to template.css :


.table{
table-layout: fixed;
}

Great. Have a screen shot how it looks now?

Sure! I've added some color:

It's quite tight, but should be still doable to respond. Looks a lot better, but will probably not work on mobile devices anymore.

Thanks for the input holch!

I've used a solution from this forum. I would like to reduce the space between the 2 arrays, but I don't know what part of the code I have to modify. Here is the code I added in template.js:

$(document).ready(function(){

// Array dual-scale - assign column and scale specific classes
if($('.table-dual-scale').length > 0) {

$('.table-dual-scale thead tr:nth-child(1)').each(function(i){
var scale = 0;
$('> *', this).not('.header_answer_text').each(function(i){
if(!$(this).hasClass('header_separator')) {
$(this).addClass('scale-'+scale+'');
}
else {
scale++;
}
});
});

$('.table-dual-scale thead tr:nth-child(2)').each(function(i){
var column = 1;
var scale = 1;
$('> *', this).not('.header_answer_text').each(function(i){
if(!$(this).hasClass('header_separator')) {
$(this).addClass('scale-'+scale+' column-'+column+'');
column++;
}
else {
column = 1;
scale++;
}
});
});

$('.table-dual-scale tr.answers-list').each(function(i){
var column = 1;
var scale = 1;
$('td', this).each(function(i){
if($(this).hasClass('radio-item')) {
$(this).addClass('scale-'+scale+' column-'+column+'');
column++;
}
else if($(this).hasClass('dual_scale_separator')) {
column = 1;
scale++;
}
});
});
}
});

Can you activate a live example so we can see the source?

Sure! Here is the link: certa.recherche.usherbrooke.ca/limesurve...x.php/972128?lang=fr

Thank you,

With already existing css ....
www.limesurvey.org/community-services/fo...-r%C3%A9ponse#148382

Add this col.separator{width:0}

Hi Denis,

I've added your code to template.css, but the space between the 2 arrays is still the same. I might be doing something wrong here:

.table > thead > tr > th.header_separator, .table > tbody > tr > th.header_separator,
.table > thead > tr > td.header_separator, .table > tbody > tr > td.header_separator{
padding:0;
}
col.separator{width:0}

Your CSS selector isn't specific enough.