Wie kann ich mein Darstellungproblem bei einer kombinierten Frage lösen?

Question

Folgendes habe ich gemäß der Anleitung (https://www.soscisurvey.de/help/doku.php/de:create:combine) im PHP-Code eingegeben.

show(
['B302', 'B303'],
['gap' => 'line']
);

Die Darstellung im Handy ist einwandfrei.
Die Darstellung auf dem Computer für diese Frage nun komplett zerschossen.

Wenn ich folgendes eingebe:
question(['B302', 'B303']);

oder folgendes:

question('B302','combine=B303');

wird es zwar am Computer richtig dargestellt, dafür am Smartphone nicht mehr.

Gibt es eine Variante, wie es sowohl am Computer als auch auf dem Smartphone korrekt dargestellt wird?

Vielen Dank im Voraus!

Comments

Könnten Sie bitte mitteilen, welchen Fragetyp B302 und B303 haben und einen Pretest-Link posten, der direkt (!) zu der betroffenen Seite im Fragebogen führt? Danke.

---

Der Fragetyp von B302 und B303 ist "Skala (Zwischenwerte beschriftet)".
Folgender Link führt direkt zur betroffenen Seite: https://www.soscisurvey.de/heimatprojekt_bayern/?act=j6H8ubjWhNpvIJK081GacZyp
Vielen Dank!

---

Oh, das sieht in der Tat wüst aus. Ursache ist folgender CSS-Code auf der Seite:

    div.s2input div.s2options {
        flex-direction: column !important;
    }

Besteht die Möglichkeit, dass Sie diesen im Layout oder auf der Seite selbst manuell eingefügt haben?

---

Ja, ich habe ihn eingefügt, damit die Skala auf dem Handy nicht von 5 (oben) nach 1 (unten) angezeigt wird, sondern anders herum. Selbst wenn man ihn rausnimmt, ist es allerdings noch verschoben. Der Link sollte jetzt auf die Seite ohne den CSS-Code "div.s2..." angezeigt werden.

Answer 1

Das Problem entsteht dadurch, dass die beiden Skalen bei Verwendung der "normalen" Abstände nicht in eine Zeile passen. SoSci Survey verteilt sie dann auf 2 Zeilen - aber ja, das Ergebnis ist wirklich nicht gut.

Im Prinzip könnten Sie den Umbruch verhindern, und zwar mit

div.s2question div.s2items#B302_tab > div.s2item {
  flex-flow: nowrap;
}

... aber dann wird eben gequetscht. Bei kleineren Displays schaltet SoSci Survey die Darstellung dann auf Kästchen um. Ich würde daher empfehlen: Stellen Sie in den beiden Fragen testweise mal die Darstellung "Kästchen" ein, damit sollte es deutlich besser passen.

ich habe ihn eingefügt, damit die Skala auf dem Handy nicht von 5 (oben) nach 1 (unten) angezeigt wird, sondern anders herum.

Bitte modifizieren Sie den Code wie folgt, damit er die "normale" Darstellung nicht beeinträchtigt:

@media (max-width: 675px) {
    div.s2input div.s2options {
        flex-direction: column !important;
    }
}

Comments

Vielen Dank für die Antwort!
Er gibt mir jetzt folgenden Fehlercode aus beim Einfügen von "@media...":
Warnung

Warnung: Unerwartetes Element: media - fehlt hier vielleicht ein Semikolon (;) oder Anführungszeichen?

@media

Warnung: Unerwartetes Element: : - fehlt hier vielleicht ein Semikolon (;) oder Anführungszeichen?

@media (max-width:

Warnung: Unerwartetes Element: 675 - fehlt hier vielleicht ein Semikolon (;) oder Anführungszeichen?

@media (max-width: 675

Warnung: Unerwartetes Element: px - fehlt hier vielleicht ein Semikolon (;) oder Anführungszeichen?

@media (max-width: 675px

Warnung: Unerwartetes Element: div - fehlt hier vielleicht ein Semikolon (;) oder Anführungszeichen?

div.s2input div

Warnung: Unerwartetes Element: : - fehlt hier vielleicht ein Semikolon (;) oder Anführungszeichen?

flex-direction:

Warnung: Unerwartetes Element: column - fehlt hier vielleicht ein Semikolon (;) oder Anführungszeichen?

flex-direction: column

Warnung: Die Funktion media() ist nicht bekannt.

---

Das ist nur der CSS-Code. Diesen können Sie entweder im Layout einbauen oder per pageCSS() in die Seite einbinden.

---

pageCSS() hat funktioniert. Uns ist jetzt allerdings noch etwas anderes in der Darstellung aufgefallen. Ich hatte im Browser eine Seitenleiste offen und da war die Darstellung der kombinierten Antwortkategorien in einer Zeile dargestellt, was uns optisch besser gefällt. Sobald ich die Seitenleiste schließe, passiert ein Umbruch.
Ich könnte Ihnen Screenshots davon zukommen lassen, wenn es dafür einen Weg gibt? Hier in dem Antwortfeld kann ich leider keine reinkopieren.
Wenn es eine einfache Lösung dafür gibt, die Antworten in einer Zeile ohne Umbruch darzustellen, wäre das toll.

---

Nun, Sie müssen generell davon ausgehen, dass die Bildschirmbreite variiert - es sollte also in allen Bildschirmgrößen möglichst ordentlich aussehen. Das ist nicht immer trivial.

> Sobald ich die Seitenleiste schließe, passiert ein Umbruch.

Heißt, wenn mehr Platz auf dem Bildschirm ist, dann wird die Darstellung gewechselt? Möchten sie vielleicht nochmal einen aktuellen Pretest-Link direkt (!) zur betroffenen Seite posten und notieren, auf welches Element ich hinsichtlich des Umbruchs achten soll? Das ist für die Lösung wesentlich zielführender als ein Screenshot :)

---

ja, genau. Wenn mehr Platz am Bildschirm ist, ändert sich die Darstellung. D.h die beiden Skalen werden nicht mehr in einer Zeile dargestellt. Eine Skala rutscht dann nach unten (obwohl ja eigentlich mehr Bildschirmfläche wäre).
Hier der Pretestlink: https://www.soscisurvey.de/heimatprojekt_bayern/index.php?i=W0SMTIHNH8FG&rnd=PPRF

---

Das liegt daran, weil die Beschriftungen (links) nicht mehr in separaten Zeilen stehen, sondern links vor den Items. Für die Beschriftungen ist aktuell eine Mindestbreite von 200 Pixeln vorgesehen. Vermutlich ist das die Standard-Vorgabe von SoSci Survey. Bitte platzieren Sie auf der Seite mal folgenden PHP-Code:

pageCSS('
  #B302_tab div.s2item > div.s2label,
  #B302_tab div.s2item > div.s2label.s2qstB302 {
    min-width: 100px;
    flex: 1 0 100px;
  }
');

---

Es hat funktioniert, vielen Dank!