- Posts: 30
- Thank you received: 1
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
- Topic Author
- Offline
- Junior Member
Less
More
7 years 9 months ago #136605
by Gordon55M
LS2.5 Responsive Label Goes Missing on Mobile was created 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.
Any thoughts, or has anyone had a similar experience?
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 11746
- Thank you received: 2750
7 years 9 months ago #136611
by holch
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Replied by holch on topic LS2.5 Responsive Label Goes Missing on Mobile
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
7 years 9 months ago #136667
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 30
- Thank you received: 1
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
Version 2.50+ Build 160430
The topic has been locked.
- Gordon55M
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 30
- Thank you received: 1
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.
- leanderwp
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 1
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).
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.
After that you can call this function onload and onresize:
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!
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 && jQuery(window).width() < 802) { jQuery('.show-desktop').hide(); jQuery('.show-mobile').show(); } // Switch from mobile to desktop if (windowWidth < 802 && 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.
- leanderwp
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 1
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.
Notice, I only tested this with the array question type, so maybe you need to change some jquery selectors to get things working!
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 && jQuery(window).width() < 802) { jQuery('.answer-item .label-text').hide(); jQuery('.answer-item .label-text').show(); } // Switch from mobile to desktop if (windowWidth < 802 && 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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 11746
- Thank you received: 2750
7 years 9 months ago #137258
by holch
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Replied by holch on topic LS2.5 Responsive Label Goes Missing on Mobile
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13907
- Thank you received: 2546
7 years 9 months ago #137277
by DenisChenu
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.
Replied by DenisChenu on topic LS2.5 Responsive Label Goes Missing on Mobile
I really hate this javascript system to show or not the text.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.
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.
- leanderwp
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 1
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"
3:
Next add this somewhere in your template's css:
When this bug is fixed by limesurvey you could just remove the overrided template files and these lines of css.
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.