(Write here your question/remark) Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Community Edition
Version 5.2.8+220103
Own server or LimeSurvey hosting: Server Phil Far
Survey theme/template:
================== 

Dear community,
last year I programmed an online survey for my PhD that includes a slider. The survey was planned to be done on a laptop, but now I had to switch to a tablet and unfortunately I have a display problem (see photo below). Can someone help? At what point in programming do I have to start?
There should be one dot on each side of the slider ("Tod" on the left and "Nicht-tödlicher Herzinfarkt" on the right)
My survey will start next week, so I would be grateful for a brief note.Thanks,

Steffi

 Excerpt from the source code:

Welches Ereignis würden Sie durch Ihre Behandlung lieber <u>vermeiden</u>? Bewegen Sie den Schieberegler bitte in diese Richtung und legen Sie dabei fest, um wie viel wichtiger Ihnen die Vermeidung im Vergleich zum anderen Ereignis ist.<br /><br /><script type="text/javascript" charset="utf-8">
    $(document).on('ready pjax:scriptcomplete',function(){
 
        var ticksArray = [
            [1, '9'],
            [2, '8'],
            [3, '7'],
            [4, '6'],
            [5, '5'],
            [6, '4'],
            [7, '3'],
            [8, '2'],
            [9, '1'],
            [10, '2'],
            [11, '3'],
            [12, '4'],
            [13, '5'],
            [14, '6'],
            [15, '7'],
            [16, '8'],
            [17, '9'],
        ];
        var ticksArray2 = [
            [1, '<span style="color:blue">extrem wichtiger</span>'],
            [2, ''],
            [3, '<span style="color:blue">sehr viel wichtiger</span>'],
            [4, ''],
            [5, '<span style="color:blue">viel <br> wichtiger</span>'],
            [6, ''],
            [7, '<span style="color:blue">etwas <br> wichtiger</span>'],
            [8, ''],
            [9, '<span style="color:black">gleich <br> wichtig</span>'],
            [10, ''],
            [11, '<span style="color:orange">etwas <br> wichtiger</span>'],
            [12, ''],
            [13, '<span style="color:orange">viel <br> wichtiger</span>'],
            [14, ''],
            [15, '<span style="color:orange">sehr viel wichtiger</span>'],
            [16, ''],
            [17, '<span style="color:orange">extrem wichtiger</span>'],
        ];
 
        insertSliderTicks('{QID}', ticksArray);
        insertSliderTicks2('{QID}', ticksArray2)
    });
 
    /* Insert Slider Tick Marks */
    function insertSliderTicks(qID, ticksArray) {
        var thisQuestion = $('#question'+qID);
 
        $(thisQuestion).addClass('with-inserted-ticks');
 
        $('input:text', thisQuestion).on('slideEnabled',function(){ 
            var thisSlider = $(this);
            var thisItem = $(thisSlider).closest('li');
            var thisMin = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemin');
            var thisMax = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemax');
            var thisRange = thisMax - thisMin;
            $.each(ticksArray, function(i, val) {
                var tickRelativePosition = val[0] - thisMin;
                var tickPercent = (tickRelativePosition/thisRange)*100;
 
                // Insert tick marks
                $('.slider-handle:eq(0)', thisItem).before('<div class="inserted-tick left-'+tickPercent+'" style="left: '+tickPercent+'%">\
                                                    <div class="tick-text">'+val[1]+'</div>\
                                                </div>');
            });    
        });
    }
    /* Insert Slider Tick Marks */
    function insertSliderTicks2(qID, ticksArray2) {
        var thisQuestion = $('#question'+qID);
 
        $(thisQuestion).addClass('with-inserted-ticks');
 
        $('input:text', thisQuestion).on('slideEnabled',function(){ 
            var thisSlider = $(this);
            var thisItem = $(thisSlider).closest('li');
            var thisMin = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemin');
            var thisMax = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemax');
            var thisRange = thisMax - thisMin;
            $.each(ticksArray2, function(i, val) {
                var tickRelativePosition = val[0] - thisMin;
                var tickPercent = (tickRelativePosition/thisRange)*100;
 
                // Insert tick marks
                $('.slider-handle:eq(0)', thisItem).before('<div class="inserted-tick2 left-'+tickPercent+'" style="left: '+tickPercent+'%">\
                                                    <div class="tick-text">'+val[1]+'</div>\
                                                </div>');
            });    
        });
    }
</script>
<style type="text/css">/* Slider Tick Marks */
 
    @media only screen and (min-width: 768px) {
 
        .with-inserted-ticks .slider-container {
            padding-right: 30px;
            padding-left: 30px;
        }
    }
 
    .with-inserted-ticks .slider-item {
        margin-bottom: 1px;
        margin-top: 1px;
    }
 
    .with-inserted-ticks .slider-container .help-block {
        margin: 25px 0 0 -20px;
        width: 40px;
        text-align: center;
    }
 
    .with-inserted-ticks .slider-container .help-block.pull-right {
        margin: 25px -20px 0 0;
    }
 
    .inserted-tick, .inserted-tick2 {
        position: absolute;
        top: 50%;
        height: 20px;
        width: 4px;
        margin-top: -5px;
        margin-left: -1px;
        background-color: #DDDDDD; 
        background-color: black; 
    }
 
    .inserted-tick2.left-0,
    .inserted-tick2.left-100,
    .inserted-tick.left-0,
    .inserted-tick.left-100 {
        background-color: transparent;
        background-color: black; 
    }
 
    .inserted-tick2 .tick-text {
        position: absolute;
        top: -250%;
        width: 100px;
        margin-left: -50px;
        color: #000000;
        text-align: center; 
    }
    .inserted-tick .tick-text {
        position: absolute;
        top: 150%;
        width: 100px;
        margin-left: -50px;
        color: #000000;
        text-align: center; 
    }
    @media only screen and (max-width: 768px) {
 .slider-list .slider-left, .slider-list .slider-right {
    border-bottom: 50px;
  }
}
        .inserted-tick.left-0 .tick-text {
            margin-left: 0px;
            text-align: left; 
        }
 
        .inserted-tick.left-100 .tick-text {
            margin-left: -100px;
            text-align: right; 
        }
  .slider .tooltip {display:none; }
    }
</style>

Add this to the css:
screen width: 1200px
 

screen width: 800px
 

Example from my tutorial (G4.1.1.)

Joffm

And as we discussed the whole thing in the German part a year ago, you should have stayed there.
I am a bit tired to talk or write with a language gap.

P.S.
If you enter code, please use this button.
 
It is much easier to read.




 

Thank you so much! Unfortunately it doesn't work. Does the code have to be used in a certain place in the CSS?

Send the lss of this question!

I added it at the end of the css.

Joffm

I tried the sample question, B1-B3, all last night. Unfortunately I wasn't successful. Here is my Iss. I hope you can help me, otherwise I will have to start with paper and pencil on Monday. Thanks again.

The problem only exists when viewing the slider. All other questions are presented via tablet without any problems. As I understand it, the slider would have to be more in the middle due to the reduced screen size. I can't explain why the second end point appears twice.

Still I do not see any issue on tablets.
Landscape:
 
Portrait:
 

Did you try the "usual" things?
Use a standard theme
Clear the browser cache
Clear the asset cache.

There were a few typos in your css of question "A"
  .slider .tooltip {display:none !important; }  /* Add this */
    }  /* wrong closing bracket */
   @media only screen and (max-width: 768px) {   /* In my example it is 1024 */
  div.col-sm-2.slider-right.text-left { float:right; }
  div.col-xs-12.col-sm-2.slider-right.text-left { display:none;
}
}  /*Missing closing bracket */
</style>

In the other questions there is the media query with a max-width of 1024 (the closing bracket is missing, too) but it is doubled; a few lines higher there is the same code with a max-width of 800px.

Now some other things:
And you should change this 
to
The above avoids this
 

and displays this
 

And do you really want to distribute this survey?
You really should revise the design.
Why do you ask nearly all single punch questions with a multiple question type?
Furthermore you do not check for only one answer

E1, D1: Play around with "label wrapper width", "Texteingabeboxbreite", ...
 
 
Question E3: The text input box of "Keins/..." should be removed and the item should be exclusive.
E2, E5 and nearly all Dx: Why multiple?
E4: There are better ways to display this. There were at least two threads about it in the last months.
[url] forums.limesurvey.org/forum/german-forum...optionsfelder#227831 [/url]

And a last thing:
Why do you use Camel case on the Welcome page (heißt auf Deutsch "Kamelschreibweise", aus gutem Grund)
but on the following pages you mention both ("Liebe Patientin, lieber Patient"), either separaterd by comma or by slash

And a small typo
Rentner/-in, Pensionäre/-in, im Vorruhestand

Joffm
 

Noch hinzuzufügen wäre:
Getestet in 5.2.2., 5.3.10. Community Edition und 5.3.24. LimeSurvey hosted.

And in the changelogs you find this:
Changes from 5.3.11 (build 220425) to 5.3.12 (build 220502) May 2, 2022
-Fixed issue #14123: Slider left/right labels not displayed correctly on iPad (#2369) (Gabriel Jenik)

Though I searched the changelogs, I missed it last time.
So there might have been a special issue on iPads.

Old ATIKA cigarettes slogan "Es war schon immer etwas teurer, einen besonderen Geschmack zu haben"

Joffm