Welcome to the LimeSurvey Community Forum

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

LS2.5 Responsive Label Goes Missing on Mobile

  • Gordon55M
  • Gordon55M's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 9 months ago #136605 by Gordon55M
I'm playing with 2.5, and evaluating if it should go into a production environment. In using the built in templates, I notice that array question answer options go missing (blank) when I shrink down the screen size to simulate a mobile device. Perhaps it's an issue with the css .no-more-tables part?

Here it what it looks like wide screen:


Here it what it looks like on a smaller width:


Here is a quick code snippet I pulled using FireBug.
Code:
<tbody>
<tr id="javatbd749145X8X40SQ001" class="well answers-list radio-list array2">
<th class="answertext">
Question 1
<input id="java749145X8X40SQ001" type="hidden" value="" name="java749145X8X40SQ001">
</th>
<td class="answer-cell-3 answer_cell_A1 answer-item radio-item text-center radio" data-title="I">
<input id="answer749145X8X40SQ001-A1" class="radio" type="radio" aria-labelledby="label-answer749145X8X40SQ001-A1" onclick="checkconditions(this.value, this.name, this.type)" value="A1" name="749145X8X40SQ001">
<label for="answer749145X8X40SQ001-A1"></label>
<div id="label-answer749145X8X40SQ001-A1" class="hide label-text"> I </div>
</td>

Any thoughts, or has anyone had a similar experience?
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 9 months ago #136611 by holch
This problem appeared a while ago, but I think it was fixed. What version do you run?

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The following user(s) said Thank You: Gordon55M
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 9 months ago #136667 by tpartner
Replied by tpartner on topic LS2.5 Responsive Label Goes Missing on Mobile
I think it's an outstanding bug - bugs.limesurvey.org/view.php?id=10808

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Gordon55M
  • Gordon55M's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 9 months ago #136701 by Gordon55M
Replied by Gordon55M on topic LS2.5 Responsive Label Goes Missing on Mobile
Thanks for the quick response as always holch.

Version 2.50+ Build 160430
The topic has been locked.
  • Gordon55M
  • Gordon55M's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 9 months ago #136709 by Gordon55M
Replied by Gordon55M on topic LS2.5 Responsive Label Goes Missing on Mobile
I updated to the latest build and that fixed it. My bad for wasting you time!
The topic has been locked.
More
7 years 9 months ago - 7 years 9 months ago #137230 by leanderwp
Replied by leanderwp on topic LS2.5 Responsive Label Goes Missing on Mobile
I also had to fix this issue for a client. For now i managed it this way:

First I enabled template view overrides, as described on (scroll to the bottom!):
manual.limesurvey.org/The_template_edito...ws_.28version_2.5.29

I placed the override for (in my case) the array type question to:
/upload/templates/ergooptima/views/survey/questions/arrays/array/no_dropdown/rows/cells/answer_td.php

Next i added a <span> with class show-mobile in the label (that was empty), and added some comment tags around the piece of code that normally only was displayed on the mobile view (and when page was opened/refreshed in the mobile view).
Code:
<?php
/**
 * Array, no drop down
 * @var $label
 * @var $ld
 * @var $myfname
 * @var $ld
 * @var $CHECKED
 * @var $checkconditionFunction
 */
?>
 
<!-- answer_td -->
<td data-bs-title='<?php echo $label;?>' class="answer-cell-3 answer_cell_<?php echo $ld;?> answer-item radio-item text-center radio">
  <input
    class="radio"
    type="radio"
    name="<?php echo $myfname;?>"
    value="<?php echo $ld; ?>"
    id="answer<?php echo $myfname;?>-<?php echo $ld; ?>"
    <?php echo $CHECKED; ?>
    onclick="<?php echo $checkconditionFunction; ?>(this.value, this.name, this.type)"
    aria-labelledby="label-answer<?php echo $myfname;?>-<?php echo $ld; ?>"
  />
  <label for="answer<?php echo $myfname;?>-<?php echo $ld; ?>" ><span class="show-mobile"><?php echo $label;?></span></label>
 
  <!--
     The label text is provided inside a div,
     so final user can add paragraph, div, or whatever he wants in the subquestion text
     This field is related to the input thanks to attribute aria-labelledby
  -->
  <?php /*
  <div class="label-text" id="label-answer<?php echo $myfname;?>-<?php echo $ld; ?>">
    <?php echo $label;?>
  </div>
   */ ?>
</td>
<!-- end of answer_td -->

After that I added some javascript to the survey's JS file. For convenience I added a separate javascript file in my template. Even when this is my own template (based on a default template of limesurvey), for whatever future update reason! But you can also place this somewhere else.
Code:
var windowWidth = 0;
 
function showHideMobileDesktop(onload) {
 
    // Run when page loaded
    if(onload == 1) {
        if(windowWidth > 820) {
            jQuery('.show-desktop').show();
            jQuery('.show-mobile').hide();
        } else {
            jQuery('.show-desktop').hide();
            jQuery('.show-mobile').show();
        }
    }
 
    // Switch from desktop to mobile
    if (windowWidth > 802 &amp;&amp; jQuery(window).width() < 802) {
        jQuery('.show-desktop').hide();
        jQuery('.show-mobile').show();
    }
 
    // Switch from mobile to desktop
    if (windowWidth < 802 &amp;&amp; jQuery(window).width() > 802) {
        jQuery('.show-desktop').show();
        jQuery('.show-mobile').hide();
    }
}

After that you can call this function onload and onresize:
Code:
$(document).ready(function()
{
    windowWidth = jQuery(window).width();
    showHideMobileDesktop(1);
});
 
$(window).resize(function() {
    showHideMobileDesktop(0);
 windowWidth = jQuery(window).width();
});

It would be nicer if we could just use standard bootstrap classes (visible-xs, visible-sm, etc). But we are not dealing with a default bootstrap width, since the switch from desktop to mobile and visa versa is on 802px.

Hope I can help someone with this, and ofcourse you can use this technique for the other array question types!
Last edit: 7 years 9 months ago by leanderwp. Reason: Bug
The topic has been locked.
More
7 years 9 months ago - 7 years 9 months ago #137233 by leanderwp
Replied by leanderwp on topic LS2.5 Responsive Label Goes Missing on Mobile
Sorry, here a more simplified version where you only have to remove the "hide" class from the question template label-text div in the overrided template.
Code:
<?php
/**
 * Array, no drop down
 * @var $label
 * @var $ld
 * @var $myfname
 * @var $ld
 * @var $CHECKED
 * @var $checkconditionFunction
 */
?>
 
<!-- answer_td -->
<td data-bs-title='<?php echo $label;?>' class="answer-cell-3 answer_cell_<?php echo $ld;?> answer-item radio-item text-center radio">
  <input
    class="radio"
    type="radio"
    name="<?php echo $myfname;?>"
    value="<?php echo $ld; ?>"
    id="answer<?php echo $myfname;?>-<?php echo $ld; ?>"
    <?php echo $CHECKED; ?>
    onclick="<?php echo $checkconditionFunction; ?>(this.value, this.name, this.type)"
    aria-labelledby="label-answer<?php echo $myfname;?>-<?php echo $ld; ?>"
  />
  <label for="answer<?php echo $myfname;?>-<?php echo $ld; ?>" ></label>
 
  <!--
     The label text is provided inside a div,
     so final user can add paragraph, div, or whatever he wants in the subquestion text
     This field is related to the input thanks to attribute aria-labelledby
  -->
  <div class="label-text" id="label-answer<?php echo $myfname;?>-<?php echo $ld; ?>">
    <?php echo $label;?>
  </div>
</td>
<!-- end of answer_td -->

Notice, I only tested this with the array question type, so maybe you need to change some jquery selectors to get things working!
Code:
var windowWidth = 0;
 
$(document).ready(function()
{
    windowWidth = jQuery(window).width();
    showHideMobileDesktop(1);
});
 
$(window).resize(function() {
    showHideMobileDesktop(0);
    windowWidth = jQuery(window).width();
});
 
function showHideMobileDesktop(onload) {
 
    // Run when page loaded
    if(onload == 1) {
        if(windowWidth > 820) {
            jQuery('.answer-item .label-text').show();
            jQuery('.answer-item .label-text').hide();
        } else {
            jQuery('.answer-item .label-text').hide();
            jQuery('.answer-item .label-text').show();
        }
    }
 
    // Switch from desktop to mobile
    if (windowWidth > 802 &amp;&amp; jQuery(window).width() < 802) {
        jQuery('.answer-item .label-text').hide();
        jQuery('.answer-item .label-text').show();
    }
 
    // Switch from mobile to desktop
    if (windowWidth < 802 &amp;&amp; jQuery(window).width() > 802) {
        jQuery('.answer-item .label-text').show();
        jQuery('.answer-item .label-text').hide();
    }
}
Last edit: 7 years 9 months ago by leanderwp.
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 9 months ago #137258 by holch
Maybe you can search for the bug report regarding this (i think it hasn't been solved yet) and add your solution or a link to this post. Maybe it helps the developers to solve the problem quicker.

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 9 months ago #137277 by DenisChenu
Replied by DenisChenu on topic LS2.5 Responsive Label Goes Missing on Mobile

holch wrote: Maybe you can search for the bug report regarding this (i think it hasn't been solved yet) and add your solution or a link to this post. Maybe it helps the developers to solve the problem quicker.

I really hate this javascript system to show or not the text.

CSS @media is done for this.

But i think is resolved in last version ? No ?

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 topic has been locked.
More
7 years 9 months ago - 7 years 9 months ago #137279 by leanderwp
Replied by leanderwp on topic LS2.5 Responsive Label Goes Missing on Mobile
I don't know why I didn't try a more pure css solution. How stupid!
So here is a new description of what you can do:

1:
First I enabled template view overrides, as described on (scroll to the bottom!):
manual.limesurvey.org/The_template_edito...ws_.28version_2.5.29

I placed the override for (in my case) the array type question to:
/upload/templates/ergooptima/views/survey/questions/arrays/array/no_dropdown/rows/cells/answer_td.php

2:
Next modify the template override by replacing the "hide" class with "visible-mobile"
Code:
<?php
/**
 * Array, no drop down
 * @var $label
 * @var $ld
 * @var $myfname
 * @var $ld
 * @var $CHECKED
 * @var $checkconditionFunction
 */
?>
 
<!-- answer_td -->
<td data-bs-title='<?php echo $label;?>' class="answer-cell-3 answer_cell_<?php echo $ld;?> answer-item radio-item text-center radio">
  <input
    class="radio"
    type="radio"
    name="<?php echo $myfname;?>"
    value="<?php echo $ld; ?>"
    id="answer<?php echo $myfname;?>-<?php echo $ld; ?>"
    <?php echo $CHECKED; ?>
    onclick="<?php echo $checkconditionFunction; ?>(this.value, this.name, this.type)"
    aria-labelledby="label-answer<?php echo $myfname;?>-<?php echo $ld; ?>"
  />
  <label for="answer<?php echo $myfname;?>-<?php echo $ld; ?>" ></label>
 
  <!--
     The label text is provided inside a div,
     so final user can add paragraph, div, or whatever he wants in the subquestion text
     This field is related to the input thanks to attribute aria-labelledby
  -->
  <div class="label-text visible-mobile" id="label-answer<?php echo $myfname;?>-<?php echo $ld; ?>">
    <?php echo $label;?>
  </div>
</td>
<!-- end of answer_td -->

3:
Next add this somewhere in your template's css:
Code:
.visible-mobile {
    display: inline;
}
.visible-desktop {
    display: none;
}
@media (min-width: 802px) {
    .visible-mobile {
        display: none;
    }
    .visible-desktop {
        display: inline;
    }
}



When this bug is fixed by limesurvey you could just remove the overrided template files and these lines of css.
Last edit: 7 years 9 months ago by leanderwp.
The following user(s) said Thank You: Gordon55M
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose