Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Slider text not displaying on small screen devices correctly.

More
8 years 8 months ago - 8 years 8 months ago #163365 by ScottBoughton
Slider text not displaying on small screen devices correctly. was created by ScottBoughton
I am using the default template to create my survey and I have finished creating my survey. However when testing my survey out on various devices I have discovered that the slider does not scale correctly on mobile devices and the text at each end of the slider appears above and below the slider instead of at each end.

I have attached images of the slider on both a PC screen and a mobile device screen to show the problem.

What is the work around for this problem?

Thanks.

Scott

Attachment not found





Attachment not found

Last edit: 8 years 8 months ago by ScottBoughton.
The topic has been locked.
Partner Banner
More
8 years 8 months ago #163371 by holch
Replied by holch on topic Slider text not displaying on small screen devices correctly.
Which version of LS are you running?

Might be a bug. But looking at the scales, I don't see how they should fit to the left and right on your small device anyway. I find that the slider format is not ideal for small screens anyway.
Help us to help you!
  • Provide your LS version and where it is installed (own server, uni/employer, SaaS hosting, etc.).
  • Always provide a LSS file (not LSQ or LSG).
Note: I answer at this forum in my spare time, I'm not a LimeSurvey GmbH employee.
The topic has been locked.
More
8 years 8 months ago #163373 by ScottBoughton
Replied by ScottBoughton on topic Slider text not displaying on small screen devices correctly.
Sorry I am new to LimeSurvey, how do i know what version I am running? I am using the pro service and editing the survey through the web browser.

Would it be possible to edit the template in such a way that the text to the left and right of the slider appears above the slider bar rather than at the sides?

I would really like to use a slider but I could use another form if it isn't possible.
The topic has been locked.
More
8 years 8 months ago #163374 by holch
Replied by holch on topic Slider text not displaying on small screen devices correctly.
The version of Limesurvey can usually be found on the bottom of the admin pages. Given that information I assume you haven't installed LS yourself but are given access to by a company or university, correct?

I don't use the slider question much, so I don't know if this is the normal behaviour or not. Maybe someone else can skip in here, because I currently don't have the time to setup such a question and check.
Help us to help you!
  • Provide your LS version and where it is installed (own server, uni/employer, SaaS hosting, etc.).
  • Always provide a LSS file (not LSQ or LSG).
Note: I answer at this forum in my spare time, I'm not a LimeSurvey GmbH employee.
The topic has been locked.
More
8 years 8 months ago #163375 by ScottBoughton
Replied by ScottBoughton on topic Slider text not displaying on small screen devices correctly.
I am using Version 2.72.6.

Thanks for your help, hopefully someone might be able to point me in the right direction.
The topic has been locked.
  • markusfluer
  • markusfluer's Avatar
  • New Member
  • New Member
More
8 years 8 months ago - 8 years 8 months ago #163462 by markusfluer
Replied by markusfluer on topic Slider text not displaying on small screen devices correctly.
Hi Scott,

As far as I can see, the slider behaves as it should be.
If you have text in front of the the slider and in the back of the slider the slider get's so small, you can barely handle it on a small screen.
That is why we opted to use the above and below option.
Last edit: 8 years 8 months ago by markusfluer.
The topic has been locked.
More
8 years 8 months ago - 8 years 8 months ago #163476 by tpartner
Replied by tpartner on topic Slider text not displaying on small screen devices correctly.
Here's a workaround...

1) Give the question a CSS Class "slider-with-texts".




2) Add something like this to the end of template.css (for the default template in version 2.73.0):

Code:
.slider-with-texts .slider-container { margin-bottom: 2.5em; } .slider-with-texts .slider-container > div { position: relative; float: none; width: 90%; max-width: 800px; margin: 0 auto; padding: 0; } .slider-with-texts .slider-container > div > div { width: 100%; padding: 0; } .slider-with-texts .slider-container .slider-left-span, .slider-with-texts .slider-container .slider-right-span { display: block; position: absolute; padding: 0; } .slider-with-texts .slider-container .slider-left-span { left: 0; top: 30px; text-align: left; } .slider-with-texts .slider-container .slider-right-span { right: 0; top: 30px; text-align: right; } @media only screen and (max-width: 480px) { .slider-with-texts .question-item.withslider { padding: 0; } .slider-with-texts .slider-container > div { width: 100%; } .slider-with-texts .slider-container .slider-left-span, .slider-with-texts .slider-container .slider-right-span { width: 40%; word-wrap: normal; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; -o-hyphens: none; hyphens: none; } }



Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 8 years 8 months ago by tpartner.
The following user(s) said Thank You: tammo
The topic has been locked.
More
8 years 8 months ago #163495 by ScottBoughton
Replied by ScottBoughton on topic Slider text not displaying on small screen devices correctly.
Thank you so much for the help! I will try implementing this soon and let you know how it goes. Thanks again.
The topic has been locked.
More
8 years 8 months ago - 8 years 8 months ago #163496 by ScottBoughton
Replied by ScottBoughton on topic Slider text not displaying on small screen devices correctly.
*Ignore this I managed to get it to work, Thanks again for you help!



Hi,

Would it be possible for you to export the temple.css file if you still have it? For some reason I can't get it to work when I copy your example code across.
Last edit: 8 years 8 months ago by ScottBoughton.
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source