Welcome to the LimeSurvey Community Forum

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

css issue in double matrix question

pmonstad
Topic Author
Offline
Junior Member

More

8 years 5 days ago #134640 by pmonstad

css issue in double matrix question was created by pmonstad

There is a css option when designing a double matrix question, but I don't see how I can e.g. make the two scales in different background colour to make it easier to see the difference between the to scales.

The screenshot shows my question. I want the first scale to be in a light grey colour while the second scale should be displayed in a darker one. Possible? Is it even possible to increase the gap between the two scales or insert some kind of divider, e.g. a vertical line?

Attachments:

...11.45.08-2.png

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

8 years 5 days ago #134641 by tpartner

Replied by tpartner on topic css issue in double matrix question

LimeSurvey version? Template?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

pmonstad
Topic Author
Offline
Junior Member

More

8 years 5 days ago #134642 by pmonstad

Replied by pmonstad on topic css issue in double matrix question

LS 2.5 default template

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

8 years 5 days ago - 8 years 5 days ago #134648 by tpartner

Replied by tpartner on topic css issue in double matrix question

There are no scale-specific classes so you would first need to add something like this to the end of template.js. It will assign scale and column specific classes.

Code:

$(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 = 1;
      $('> *', 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++;
        }
      });
    });
  }
});

Then, you could style the elements in template.css something like this. Note the media query so it doesn't affect layout on mobile devices.

Code:

@media only screen and (min-width: 768px) {
 
    .table-dual-scale thead th,
  .table-dual-scale tbody td {
    text-align: center;
    }
 
    .table-dual-scale .array1 {
    background-color: #f9f9f9;
  }
 
  .table-dual-scale td.answer-item.scale-1 { 
    background: #c0cdd1;
  }
 
  .table-dual-scale td.answer-item.scale-2 { 
    background: #dde4e6;
  }
 
  .table-dual-scale .array2 td.answer-item.scale-1 { 
    background: #cfd9db;
  }
 
  .table-dual-scale .array2 td.answer-item.scale-2 { 
    background: #ecf0f1;
  }
}