- Posts: 31
- Thank you received: 4
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
Less
More
8 years 1 week 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?
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:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10104
- Thank you received: 3593
8 years 1 week ago #134641
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
Less
More
- Posts: 31
- Thank you received: 4
8 years 1 week 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
Less
More
- Posts: 10104
- Thank you received: 3593
8 years 1 week ago - 8 years 1 week ago #134648
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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.
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:
$(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; } }
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 8 years 1 week ago by tpartner.
The topic has been locked.