- Posts: 14
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Slider display on smartphones
- zschaerer
- Topic Author
- Offline
- New Member
Less
More
6 years 9 months ago #157084
by zschaerer
Slider display on smartphones was created by zschaerer
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!
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!
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3593
6 years 9 months ago #157086
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 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?
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.
The topic has been locked.
- zschaerer
- Topic Author
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
6 years 9 months ago - 6 years 9 months ago #157092
by zschaerer
Replied by zschaerer on 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
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: 6 years 9 months ago by zschaerer.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3593
6 years 8 months ago #157111
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 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.
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.
The topic has been locked.
- zschaerer
- Topic Author
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
6 years 8 months ago - 6 years 8 months ago #157112
by zschaerer
Replied by zschaerer on 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
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?
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: 6 years 8 months ago by zschaerer.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3593
6 years 8 months ago #157150
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 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.
The topic has been locked.