Welcome to the LimeSurvey Community Forum

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

Stopping the 'No More Table' transformation

hilledw
Topic Author
Offline
New Member

More

5 years 2 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.

tpartner
Offline
LimeSurvey Community Team

More

5 years 2 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.

hilledw
Topic Author
Offline
New Member

More

5 years 2 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:18 KB

attached is a sample. Many thanks Tony for trying to help !

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

5 years 2 months ago - 4 years 11 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 KB

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

Last edit: 4 years 11 months ago by tpartner.

The following user(s) said Thank You: DenisChenu, cdorin

The topic has been locked.

hilledw
Topic Author
Offline
New Member

More

5 years 2 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.

hilledw
Topic Author
Offline
New Member

More

5 years 2 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.

tpartner
Offline
LimeSurvey Community Team

More

5 years 2 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.

hilledw
Topic Author
Offline
New Member

More

5 years 2 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.

tpartner
Offline
LimeSurvey Community Team

More

5 years 2 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:23 KB

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

Attachments:

limesurvey...3413.lss

The following user(s) said Thank You: hilledw

The topic has been locked.

hilledw
Topic Author
Offline
New Member

More

5 years 2 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.

gremlin
Offline
New Member

More

4 years 11 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.

tpartner
Offline
LimeSurvey Community Team

More

4 years 11 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 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.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Stopping the 'No More Table' transformation

File Attachment:

File Attachment:

File Attachment:

File Attachment:

Lime-years ahead

Legal

About Us

Open Source