Stopping the 'No More Table' transformation

More
1 year 8 months ago #180538 by hilledw
Hi

I'm a newbie to LS so likely I'm doing something wrong.....

I have Array by column radio questions, on LS Version 3.15.9.. Fruity theme. The table transforms into one column on mobile devices / ipads. I do not want this to happen as the table is small enough ( it has only 3 columns), so it should fit on a mobile screen.

I searched a previous post about this: https://www.limesurvey.org/de/foren/design-issues/112843-prevent-change-of-look-on-smaller-screens

I also want to target a single question, so added the following JS to the question, but it does not work I still have the unwanted transformation on mobile devices:
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$('#question{QID} .no-more-tables').removeClass('no-more-tables');
		$('#question{QID} .answer-item .label-text').remove();
	});
</script>


Any help with this would be appreciated !!
The topic has been locked.
LimeSurvey Partners
More
1 year 8 months ago #180549 by tpartner
Can you attach a small sample survey (.lss) file containing only the relevant question?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
The topic has been locked.
More
1 year 8 months ago #180550 by hilledw

File Attachment:

File Name: limesurvey...5341.lss
File Size:18 KB



attached is a sample. Many thanks Tony for trying to help !
Attachments:
The topic has been locked.
More
1 year 8 months ago - 1 year 5 months ago #180555 by tpartner
1) Remove the JavaScript.

2) Assign a question CSS class "custom-array".

3) Extend your theme and add something like this to your custom.css file:

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
 
    .custom-array table.ls-answers {
		display: table;
	}
 
	.custom-array table.ls-answers thead {
		display: table-header-group;
	}
 
	.custom-array table.ls-answers tbody {
		display: table-row-group;
	}
 
	.custom-array table.ls-answers tr {
		display: table-row;
	}
 
	.custom-array table.ls-answers tr.ls-hidden {
		display: none;
	}
 
	.custom-array table.ls-answers th,
	.custom-array table.ls-answers td {
		display: table-cell;
	}
 
	.dir-ltr .custom-array table.ls-answers th,
	.dir-ltr .custom-array table.ls-answers td {
		text-align: center;
	}
 
	.dir-ltr .custom-array table.ls-answers tbody th.answertext {
		text-align: right;
	}
 
    .custom-array table.ls-answers tbody td {
		text-align:left;
	}
 
 
	.dir-ltr .custom-array .ls-answers td.radio-item,
	.dir-ltr .custom-array .ls-answers td.checkbox-item {
		padding: 8px 0;
	}
 
    .custom-array table.ls-answers tbody .control-label {
		text-align:left
	}
 
    .custom-array table.ls-answers .ls-label-xs-visibility {
        display: inline-block;
		position: relative;
		overflow: hidden;
		width: 17px;
		height: 17px;
		line-height: 21px;
		text-indent: 21px;
		left: auto;
		margin-left: -20px;
    }
 
    .dir-ltr .custom-array table.ls-answers .radio-item label.ls-label-xs-visibility::before,
	.dir-ltr .custom-array table.ls-answers .checkbox-item label.ls-label-xs-visibility::before {
		margin-left: 0px;
	}
 
    .dir-ltr .custom-array table.ls-answers .radio-item label.ls-label-xs-visibility::after,
	.dir-ltr .custom-array table.ls-answers .checkbox-item label.ls-label-xs-visibility::after {
		margin-left: 0px;
	}
 
    .custom-array table.ls-answers > tbody > tr:hover {
        background-color: inherit;
    }
}



Attached is your sample survey with those CSS rules in the question source.

File Attachment:

File Name: limesurvey...3412.lss
File Size:20 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
Last edit: 1 year 5 months ago by tpartner.
The following user(s) said Thank You: DenisChenu, cdorin
The topic has been locked.
More
1 year 8 months ago #180559 by hilledw
Many thanks for the quick and detailed response. I’ll give that a try later .
The topic has been locked.
More
1 year 8 months ago #180580 by hilledw
So this fix is working well on mobiles. Many thanks Tony

I have one more question that I'm now stuck on. Does anyone know if there is a way to have different "Answer Column Width" for different devices.

Ideally I want this at 60 % for mobiles/devices, but the normal default settings for large screens.

I've tried adding some extra CSS rules (see below) to what Tony posted, but it doesn't recognise 'answer column width'. So any help to where I'm going wrong would be appreciated .


@media only screen and (max-width: 760px)  {
 
    .custom-array table.ls-answers {
		answer-column-width: 60%;
	}
}
 
The topic has been locked.
More
1 year 8 months ago #180583 by tpartner
Try this (cannot test this weekend - only have a phone):

@media only screen and (max-width: 760px)  {
 
    .custom-array table.ls-answers col {
		width: auto !important;
	}
 
    .custom-array table.ls-answers tbody th.answertext {
		width: 60%;
	}
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
The topic has been locked.
More
1 year 8 months ago #180589 by hilledw
Thanks for the tip.... So I tried that and also tried various nth child(1) formulas as well in the css. I just can’t get that first column width to change. Not sure what I’m doing wrong .
The topic has been locked.
More
1 year 8 months ago #180612 by tpartner
This should do it:

@media only screen and (max-width: 760px)  {
 
    .custom-array table.ls-answers col {
		width: auto !important;
	}
 
    .custom-array table.ls-answers thead td:first-child,
    .custom-array table.ls-answers tbody th.answertext {
		width: 60%;
	}
}

Sample survey attached:

File Attachment:

File Name: limesurvey...3413.lss
File Size:23 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
The following user(s) said Thank You: hilledw
The topic has been locked.
More
1 year 8 months ago #180620 by hilledw
Excellent. Works perfectly. Many thanks
The topic has been locked.
More
1 year 5 months ago #183672 by gremlin
Hi Tony,

The script doesn't seem to work if the question has array filters on. The array filter still works on a large screen but will reveals all the "hidden" sub-questions when on a smaller screen. Is there a way around this?

thanks!
The topic has been locked.
More
1 year 5 months ago #183679 by tpartner
These updated rules will account for rows dynamically hidden via array filter or relevance:

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
 
	.custom-array table.ls-answers {
		display: table;
	}
 
	.custom-array table.ls-answers thead {
		display: table-header-group;
	}
 
	.custom-array table.ls-answers tbody {
		display: table-row-group;
	}
 
	.custom-array table.ls-answers tr {
		display: table-row;
	}
 
	.custom-array table.ls-answers tr.ls-hidden {
		display: none;
	}
 
	.custom-array table.ls-answers th,
	.custom-array table.ls-answers td {
		display: table-cell;
	}
 
	.dir-ltr .custom-array table.ls-answers th,
	.dir-ltr .custom-array table.ls-answers td {
		text-align: center;
	}
 
	.dir-ltr .custom-array table.ls-answers tbody th.answertext {
		text-align: right;
	}
 
	.custom-array table.ls-answers tbody td {
		text-align:left;
	}
 
 
	.dir-ltr .custom-array .ls-answers td.radio-item,
	.dir-ltr .custom-array .ls-answers td.checkbox-item {
		padding: 8px 0;
	}
 
	.custom-array table.ls-answers tbody .control-label {
		text-align:left
	}
 
	.custom-array table.ls-answers .ls-label-xs-visibility {
		display: inline-block;
		position: relative;
		overflow: hidden;
		width: 17px;
		height: 17px;
		line-height: 21px;
		text-indent: 21px;
		left: auto;
		margin-left: -20px;
	}
 
	.dir-ltr .custom-array table.ls-answers .radio-item label.ls-label-xs-visibility::before,
	.dir-ltr .custom-array table.ls-answers .checkbox-item label.ls-label-xs-visibility::before {
		margin-left: 0px;
	}
 
	.dir-ltr .custom-array table.ls-answers .radio-item label.ls-label-xs-visibility::after,
	.dir-ltr .custom-array table.ls-answers .checkbox-item label.ls-label-xs-visibility::after {
		margin-left: 0px;
	}
 
	.custom-array table.ls-answers > tbody > tr:hover {
		background-color: inherit;
	}
}



Sample survey attached:

File Attachment:

File Name: limesurvey...1462.lss
File Size:25 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
The following user(s) said Thank You: gremlin
The topic has been locked.
More
1 year 5 months ago #183687 by DenisChenu

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development . I don't answer to private message.
The following user(s) said Thank You: cdorin, gremlin
The topic has been locked.

Start now!

Just create your account and start using Limesurvey today.

Register now