Slider display on smartphones

More
2 months 3 weeks ago #157084 by zschaerer
zschaerer created the topic: Slider display on smartphones
I am using sliders in an array(text) question that I created with my own basic knowledge and mostly different workarounds by Tony Partner ( www.limesurvey.org/forum/design-issues/1...the-grouping-of-rows and www.limesurvey.org/forum/design-issues/1...with-yes-no-question ).

Now I have the problem that the slider labels are not displayed correctly on smartphones. Any ideas how to solve that? Please have look at the attached basic example.

Thanks in advance!

File Attachment:

File Name: limesurvey...7-25.lss
File Size:20 KB
Attachments:

Please Log in to join the conversation.

More
2 months 3 weeks ago #157086 by tpartner
tpartner replied the topic: Slider display on smartphones
The links to the workarounds are broken.

What LS version are you using?

Can you activate a test survey and give us a link?

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

Please Log in to join the conversation.

More
2 months 3 weeks ago - 2 months 3 weeks ago #157092 by zschaerer
zschaerer replied the topic: Slider display on smartphones
I am using Version 2.64.7+170404 with the default template.

Here are the right links to the workarounds:
www.limesurvey.org/forum/design-issues/1...uping-of-rows#155381
www.limesurvey.org/forum/design-issues/1...tion?start=15#155380

And here is the link to a test survey:
www2.ak.tu-berlin.de/musikstudie/umfrage...x.php/586746?lang=de
Last Edit: 2 months 3 weeks ago by zschaerer.

Please Log in to join the conversation.

More
2 months 3 weeks ago #157111 by tpartner
tpartner replied the topic: Slider display on smartphones
You have tried to position the labels with fixed padding. That won't work responsively.

Position the labels by floating them as in the linked workaround and sample survey.

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

Please Log in to join the conversation.

More
2 months 3 weeks ago - 2 months 3 weeks ago #157112 by zschaerer
zschaerer replied the topic: Slider display on smartphones
I only have one answer column and I don't want the slider to use the whole width of the column. That's why I changed its width with the following code
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {                    //pageload ready?
 
  // Push the text input widths to XX% of their parent containers
   $( 'div#question41522 table.question input[type="text"]' ).css({ 'width':'50%' });
 
  $( 'div#question41522 table.question tbody th' ).css({ 'text-align':'center' });
 
  });
</script>

If I float the left and right labels, they are displayed on the far left and right of the answer column, i.e. not near the ends of the slider. That's why I used the padding. Do you have a hint for a better way to change the slider width?
Last Edit: 2 months 3 weeks ago by zschaerer.

Please Log in to join the conversation.

More
2 months 3 weeks ago #157150 by tpartner
tpartner replied the topic: Slider display on smartphones
Try limiting the max-width of the question instead of the sliders.

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

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now