Position Textanker bei Zweiseitigem Schieberegler nicht einheitlich auf Mobilgerät

Question

Hallo!

Ich nutze zweiseitige Schieberegler, um mehrere Items mit unterschiedlichen Textankern zu kombinieren (wie hier besprochen).

Das funktioniert auf dem Desktop soweit einigermaßen ok. Jetzt habe ich über den Browser mal die Ansicht eines Mobilgeräts simuliert und dabei wird bei einem der Items der linke Ankertext unten angezeigt, der rechte aber oben.

Lässt sich das beheben? Idealerweise würde auf dem Desktop die Textanker auf einer Höhe mit dem Balken links und rechts von diesem angezeigt (aktuell leicht oberhalb davon) und auf dem Mobilgerät so wie es Standard ist, nämlich links und rechts oberhalb des Balkens.

Ich habe bei dem Layout keine Einstellung gefunden, die sich auf die Positionierung der Anker bezieht.

Comments

Möchten Sie bitte einen Pretest-Link direkt (!) zur betroffenen Seite posten? Dann kann ich Ihnen gleich eine Lösung liefern, die zu Ihrem Setting passt.

---

https://www.soscisurvey.de/afmbe/?act=eQclBCjKEhO0lgw4GTTlHmY7

Betrifft das unterste Item im Mobilmodus.

Answer 1

Die Verschiebung "Minimum unten"/"Maximum oben" sehe ich nur bei RT16 - bei den anderen Schiebereglern bleben die Texte (wie von Ihnen gewünscht) oberhalb des Reglerbereichs.

Nachdem alle Items zur selben Frage gehören (die Sie - wenn ich es richtig sehe - zweimal mit unterschiedlichen Items auf der Seite eingebunden haben), verorte ich das Problem bei der doppelten Einbindung. Die Automatik, welche das Layout umschaltet, greift nur bei der ersten Instanz der Frage.

Könnten Sie bitte testweise die Frage kopieren, und bei der zweiten Einbindung die andere Frage verwenden?

Comments

Das löst das Problem, danke!

Gibt es denn auch eine Möglichkeit, die Anker auf dem Desktop auf gleicher Höhe mit dem Balken zu verorten, so wie es im Beispielbild für zweiseitige Schieberegler aussieht?

---

Sehr schön.

Was die vertikale Position angeht: Wenn wir uns um mehrzeilige Labels keine Sorgen machen müssen, würde ich zu dieser sehr einfachen Lösung tendieren:

pageCSS('
  div.s2item > div.s2label {
    padding-top: 1.5em;
  }
');

---

Ein Traum! Vielen Dank und ein schönes Wochenende!