Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Stopping the 'No More Table' transformation

More
7 years 7 months ago #180538 by hilledw
Stopping the 'No More Table' transformation was created 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: www.limesurvey.org/de/foren/design-issue...k-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:
Code:
<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.
Partner Banner
More
7 years 7 months ago #180549 by tpartner
Replied by tpartner on topic Stopping the 'No More Table' transformation
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.
The topic has been locked.
More
7 years 7 months ago #180550 by hilledw
Replied by hilledw on topic Stopping the 'No More Table' transformation

File Attachment:

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



attached is a sample. Many thanks Tony for trying to help !
The topic has been locked.
More
7 years 7 months ago - 7 years 4 months ago #180555 by tpartner
Replied by tpartner on topic Stopping the 'No More Table' transformation
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:

Code:
@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.48 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 7 years 4 months ago by tpartner.
The following user(s) said Thank You: DenisChenu, cdorin
The topic has been locked.
More
7 years 7 months ago #180559 by hilledw
Replied by hilledw on topic Stopping the 'No More Table' transformation
Many thanks for the quick and detailed response. I’ll give that a try later .
The topic has been locked.
More
7 years 7 months ago #180580 by hilledw
Replied by hilledw on topic Stopping the 'No More Table' transformation
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 .


Code:
@media only screen and (max-width: 760px) { .custom-array table.ls-answers { answer-column-width: 60%; } }
The topic has been locked.
More
7 years 7 months ago #180583 by tpartner
Replied by tpartner on topic Stopping the 'No More Table' transformation
Try this (cannot test this weekend - only have a phone):

Code:
@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.
The topic has been locked.
More
7 years 6 months ago #180589 by hilledw
Replied by hilledw on topic Stopping the 'No More Table' transformation
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
7 years 6 months ago #180612 by tpartner
Replied by tpartner on topic Stopping the 'No More Table' transformation
This should do it:

Code:
@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:22.93 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: hilledw
The topic has been locked.
More
7 years 6 months ago #180620 by hilledw
Replied by hilledw on topic Stopping the 'No More Table' transformation
Excellent. Works perfectly. Many thanks
The topic has been locked.
More
7 years 4 months ago #183672 by gremlin
Replied by gremlin on topic Stopping the 'No More Table' transformation
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
7 years 4 months ago #183679 by tpartner
Replied by tpartner on topic Stopping the 'No More Table' transformation
These updated rules will account for rows dynamically hidden via array filter or relevance:

Code:
@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.14 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: gremlin
The topic has been locked.
More
7 years 4 months ago #183687 by DenisChenu
Replied by DenisChenu on topic Stopping the 'No More Table' transformation
Included in SkelVanilla
extensions.sondages.pro/themes-and-templ...xed-or-no-more-table
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.
The following user(s) said Thank You: cdorin, gremlin
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source