Skala Kärtchendarstellung zentriert zum Itemtext

Question

In unserem Fragebogen benutzen wir eine Skala (Zwischenwerte beschriftet) mit 2 Werten (richtig, falsch), welche wir im Kärtchenmodus darstellen. Die Itemtexte bestehen aus einer Aussage in Textform und daneben ein kleines Bild zur Erklärung (Link Pretest). Mit dem folgenden html stellen wir für jedes Item den Text vertikal zentriert neben dem Bild da:

<div style="display: flex; align-items: center;">  
  <span style="flex-grow: 1;"> Aussage</span>  
  <img src="GE_DA_01.png" style="max-width: 40%; margin-left: 10px;">
</div>

Das Problem ist, dass die beiden Auswahlkärtchen weiterhin am oberen Rand jeder Zeile dargestellt werden. Wir können wir diese zusammen mit dem Text und Bild zentriert darstellen?

Des Weiteren hatten wir überlegt schmale gestrichelte Linien zwischen den einzelnen Items (inklusive Auswahlkärtchen) zu ziehen, wie ließe sich das erreichen?

Vielen Dank!

Answer 1

Bitte ergänzen Sie auf der Seite folgenden PHP-Code:

pageCSS('
    div.s2input.s2qstGE01 div.s2inputs {
        align-items: center;
        height: 100%;
    }
');

Oder falls die Kärtchen die volle Höhe einnehmen sollen:

pageCSS('
    div.s2input.s2qstGE01 div.s2inputs {
        height: 100%;
    }
    #GE01_tab .s2iCheckbox > label.s2box,
    #GE01_tab .s2iCheckbox > span.s2box {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
');

Testen Sie die Darstellung bitte auch für Smartphones, indem Sie das Browserfenster schmaler schieben.

Des Weiteren hatten wir überlegt schmale gestrichelte Linien zwischen den einzelnen Items (inklusive Auswahlkärtchen) zu ziehen, wie ließe sich das erreichen?

pageCSS('
    div.s2question div.s2items#GE01_tab > div.s2item {
      border-bottom: 1px dashed;
    }
');

Wobei ich eher mit zusätzlichem Abstand arbeiten würde.

pageCSS('
    div.s2question div.s2items#GE01_tab > div.s2item {
      margin-bottom: 2em;
    }
');

Comments

Vielen Dank für die schnelle Antwort!

Ist es möglich diese Einstellung für alle Fragen mit dieser Skala zentral einzurichten? Wir haben noch mehrere dieser Fragen und es wäre natürlich einfacher, wenn man die CSS Einstellung zentral einmal vornimmt.

Der Abstand ist eine super Idee, danke.

Zur Darstellung über Tablet (Galaxy Tab S6) habe ich noch eine weitere Frage bezüglich des Itemvorspanns: Im Querformat wird die Frage wie erwartet dargestellt, mit dem Itemvorspann nur einmal ganz oben. Zeigt man jedoch die Frage im Hochformat an, wird der Itemvorspann vor jedes Item einzeln gesetzt, obwohl er sich im Hochformat viel besser einsehen lässt, als im Querformat. Ist es möglich dieses Verhalten im Hochformat auszustellen und den Itemvorspann nur einmal am Anfang der Frage anzuzeigen?

---

Testen Sie bitte einmal, die jeweilige fragespezifische ID wegzulassen, also jeweils das mit dem Hash, statt

div.s2items#GE01_tab

dann

div.s2items

Wenn es dann noch funktioniert, können sie es so ins Layout schreiben. Testen Sie aber anschließend, ob nicht auch andere Fragen davon in Mitleidenschaft gezogen werden. Falls ja, müssten noch CSS-Selektoren für den Fragetyp vorab ergänzt werden. Details klären wir im Fall, dass es Probleme gibt.

> Zeigt man jedoch die Frage im Hochformat an, wird der Itemvorspann vor jedes Item einzeln gesetzt

Das ist für den Fall, dass der Vorspann wegen des Scrollens nicht mehr sichtbar ist. Ganz glücklich sind wir mit der Lösung noch nicht ... aber ja, auch das lässt sich per CSS ändern. Suchen Sie bitte mal nach "@media". Falls Sie nicht fündig werden, suche ich die Antwort nochmal heraus.