Infoboxen Fragebogen

Question

Sehr geehrtes Sosci-Survey-Team,

anbei wollte ich mich bei Ihnen erkundigen, ob es möglich ist die Breite der Infoboxen anzupassen bzw. die aktuelle Breite der Infobox zu erhöhen?

Des Weiteren wollte ich fragen, ob man die eingeblendete weiße Box im Rahmen des Fragebogens ausblenden kann. Ich habe an dieser Stelle eine Infobox erstellt und die Infobox wie folgt formatiert (siehe unten). Leider erscheint die weiße Infobox, wenn man mit dem Cursor auf das offene Feld klickt.

Vielen Dank im Voraus.

Comments

Könnten Sie bitte einen Pretest-Link direkt (!) zu der betroffenen Fragebogen-Seite posten? Dann kann ich auf Ihre erste Frage konstruktiver antworten und mir den zweiten Teil der Frage direkt im HTML-Code ansehen.

Answer 1

Ist es möglich einen Pretestlink in anonymer Form zu posten, sodass meine Daten, die im Impressum aufgelistet werden nur für den Sosci Survey Support sichtbar sind?

Comments

Wenn Ihnen daran gelegen ist, können Sie den Pretest-Link (bitte direkt zur betroffenen Seite) zusammen mit einem Link auf Ihre Frage an info@soscisurvey.de schicken.

---

Ich habe Ihnen soeben eine E-Mail an Ihre angegebene E-Mail-Adresse gesandt.

Vielen Dank bereits im Voraus für Ihre Hilfe.

Answer 2

Bitte fügen Sie (z.B. mittels pageCSS()) folgenden CSS-Code auf der Seite ein:

span.S2Tooltip.tiptext {
    width: 360px;
}

Also z.B. folgenden PHP-Code:

pageCSS('
    span.S2Tooltip.tiptext {
        width: 360px;
    }
');

Die Standard-Breite sind 250 Pixel.

Comments

An welcher Stelle gebe ich den CSS-Code bzw. PHP-Code ein? Und wie gebe ich den Code ein, wenn die Infobox z.B. auf den Seiten 6 und 7 angepasst werden müssen?
Bisher habe ich weder mit dem CSS-Code noch mit dem PHP-Code gearbeitet.

Ist es auch möglich die Änderung im Rahmen der Kategorie Fragebogen Layouts und HTML-Vorlage des Layouts anzupassen?

Betrifft der CSS- bzw. PHP-Code nur die Breite der Infoboxen?

Welche Lösung haben Sie für die weiße Box, die erscheint, wenn man mit dem Cursor über das Eingabefeld fährt?
Und wie werden Infoboxen auch am Ende einer Seite noch vollständig angezeigt?

---

Wenn Sie es per PHP-Code lösen möchten, dann tragen Sie die PHP-Code auf beiden Seite 6 und 7 ein (irgendwo auf der Seite).

> Ist es auch möglich die Änderung im Rahmen der Kategorie Fragebogen Layouts und HTML-Vorlage des Layouts anzupassen?

Ja, ist es.

> Betrifft der CSS- bzw. PHP-Code nur die Breite der Infoboxen?

Ja, die "S2Tooltip" sind die Infoboxen :)

> Welche Lösung haben Sie für die weiße Box, die erscheint, wenn man mit dem Cursor über das Eingabefeld fährt?

Stimmt, da war noch was... leider ist der Pretest-Link aus der E-Mail bereits ungültig. Sie können unter "Pretest und Vorschau" einen neuen erstellen und mir zukommen lassen.

> Und wie werden Infoboxen auch am Ende einer Seite noch vollständig angezeigt?

Am einfachsten ist es, wenn Sie dafür einfach etwas Weißraum unten im Fragebogen einfügen. Beispielsweise über folgenden CSS-Code.

body {
  margin-bottom: 160px;
}

---

Ich haben Ihnen erneut eine E-Mail mit dem entsprechenden Pretest-Link zukommen lassen.

---

Dankeschön. Generell zeigen Eingabefelder die Beschriftung nochmal als "Titel" an, damit ScreenReader und andere Eingabe hilfen besser damit umgehen können.

Verstehe ich Sie richtig, dass es Ihnen vor allem um die zusätzlichen Informationen geht, die sonst hinter dem Info-Knopf verborgen sind, die Sie dort eigentlich nicht sehen möchten?

---

Ich habe die Infoboxen erstellt und hinter dem i verborgen. Mir war es wichtig, dass diese nur angezeigt werden, wenn man mit dem Cursor auf das i klickt bzw. darüber fährt.

Geht man jedoch auf das Feld Anzahl der Stunden und möchte etwas in das Kästchen eintragen, dann erscheint der weiße Kasten zusätzlich (siehe Bild 1 oben). Dieser ist natürlich nicht so schön formatiert wie die eigentliche Infobox (i), in der ich extra Absätze gemacht habe zur leichteren Lesbarkeit.  

Laut Ihrer Aussage kann man jedoch den erscheinenden weißen Kasten nicht entfernen (siehe Bild 1 oben).

__________________________

Ferner wäre ich Ihnen wirklich dankbar, wenn Sie mir die in der Mail gestellten Fragen hinsichtlich der Positionen der CSS-Codes in der Kategorie: "Fragebogen-Layouts und HTML-Vorlage des Layouts" beantworten könnten

1) An welcher Stelle in der HTML-Vorlage muss ich Ihren oben genannten Code einfügen, sodass die entsprechenden Infoboxen verbreitert werden? Bzw. wo darf man diesen Code zusätzlich einfügen, da ich in der HTML-Vorlage keine Kategorie zu "S2Tooltip" finde und keinen bestehenden Code verändern möchte. Oder soll dieser Code ganz ans Ende der HTML-Vorlage gesetzt werden?

span.S2Tooltip.tiptext {
    width: 360px;
}
______________________________

2) An welcher Stelle füge ich den genannten CSS-Code ein?

body {
  margin-bottom: 160px;
}


In der HTML-Vorlage finde ich nur diese Angaben zu "body"

<style type="text/css">
body {background.color: #EEEEEE; padding-bottom: 24px; line-height: 1.5em; padding: 10px; }
div.s2t-logo img {max-width: 100%; box-sizing: border-box;}

usw.


Vielen Dank bereits im Voraus für Ihre Unterstützung

---

> Laut Ihrer Aussage kann man jedoch den erscheinenden weißen Kasten nicht entfernen (siehe Bild 1 oben).

Ich muss mal schauen, ob man zusätzliche Inhalte (also den Inhalt der Infobox) aus dem Tooltip entfernen kann.

> 1) An welcher Stelle in der HTML-Vorlage muss ich Ihren oben genannten Code einfügen

CSS-Code fügen Sie bitte in der "HTML-Vorlage" des Layout im <style>-Bereich, also zwischen <style> und </style> ein.

> 2) An welcher Stelle füge ich den genannten CSS-Code ein?

Auch dabei handelt es sich um CSS-Code, der entweder mittells pageCSS() für einzelne Seiten oder im <style>-Bereich im Layout untergebracht werden kann.

---

Sie meinen, dass nur die blaue Infobox erscheint, jedoch das weiße Kästchen (siehe oben) nicht noch zusätzlich? Das wäre wirklich super, wenn das ginge.

zu 1) Vielen Dank. Mit Hilfe Ihres Tipps konnte ich die Infobox auf die entsprechende Breite hin vergrößern, sodass alle Angaben in einer Zeile stehen.

zu 2) Auch hier konnte ich nochmals varieren und schauen wie viel Rand ich benötige, sodass die Infobox komplett am Ende einer Seite angezeigt wird.

Ich habe beide CSS-Codes direkt vor </style> untergebracht, sodass ich keine bestehenden Codes in irgendeiner Weise verändere.

---

Wir haben auf www.soscisurvey.de ein Update eingespielt, sodass der Inhalt der Info-Box nicht mehr in der Beschreibung des Eingabefelds auftaucht.