Stopping the 'No More Table' transformation

More
1 month 1 week 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 !!

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
1 month 1 week 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.

Please Log in or Create an account to join the conversation.

More
1 month 1 week 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:

Please Log in or Create an account to join the conversation.

More
1 month 1 week 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 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.
Attachments:
The following user(s) said Thank You: DenisChenu, LouisGac

Please Log in or Create an account to join the conversation.

More
1 month 1 week ago #180559 by hilledw
Many thanks for the quick and detailed response. I’ll give that a try later .
The following user(s) said Thank You: LouisGac

Please Log in or Create an account to join the conversation.

More
1 month 6 days 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%;
	}
}
 

Please Log in or Create an account to join the conversation.

More
1 month 6 days 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.

Please Log in or Create an account to join the conversation.

More
1 month 4 days 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 .

Please Log in or Create an account to join the conversation.

More
1 month 4 days 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.
Attachments:
The following user(s) said Thank You: hilledw

Please Log in or Create an account to join the conversation.

More
1 month 4 days ago #180620 by hilledw
Excellent. Works perfectly. Many thanks

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!