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.

  • ScottBoughton
  • ScottBoughton's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 2 months ago - 6 years 2 months ago #163365 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: 6 years 2 months ago by ScottBoughton.
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 2 months ago #163371 by holch
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.

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.
  • ScottBoughton
  • ScottBoughton's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 2 months ago #163373 by ScottBoughton
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.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 2 months ago #163374 by holch
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.

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.
  • ScottBoughton
  • ScottBoughton's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 2 months ago #163375 by ScottBoughton
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
  • Visitor
  • Visitor
6 years 2 months ago - 6 years 2 months ago #163462 by markusfluer
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: 6 years 2 months ago by markusfluer.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 2 months ago - 6 years 2 months ago #163476 by tpartner
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: 6 years 2 months ago by tpartner.
The following user(s) said Thank You: tammo
The topic has been locked.
  • ScottBoughton
  • ScottBoughton's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 2 months ago #163495 by ScottBoughton
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.
  • ScottBoughton
  • ScottBoughton's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 2 months ago - 6 years 2 months ago #163496 by ScottBoughton
*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: 6 years 2 months ago by ScottBoughton.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose