0 votes
in SoSci Survey (dt.) by s109993 (12.0k points)

Guten Morgen,

ich möchte den "weiter und "zurück" Button auf allen Seiten des OFB's fixieren. Das heißt, auch wenn die Seite so lang ist das man scrollen, sollen beide Buttons immer verfügbar sein. Kann ich das in der Layout Syntax so anpassen das es für den ganzen Fragebogen gültig ist?

Vielen Dank

1 Answer

+1 vote
by SoSci Survey (328k points)
selected by s109993
 
Best answer

Ja, kann man. Wie das genau funktioniert, hängt aber vom Layout ab. Welches Layout verwenden Sie denn? Und für mich zum Verständnis: Was möchten SIe mir dem fixierten Weiter-Knopf erreichen?

Vorab sollten Sie sich noch ein paar Gedanken zur Usability machen. Ich hatte für ein anderes Projekt einmal ein Layout mit fixierten Buttons erstellt - aber die Kollegen haben sich am Ende doch für das "normale" Layout entschieden, weil es bei längerne Seiten sonst schnell passiert, dass man die "unteren" Fragen übersieht. Es kann ja durchaus passieren, dass die erste Frage den Raum über den Knöpfen "gerade so" ausfüllt und dass man (v.a. wenn auf einem Mac-System oder auf einem Tablet der Scrollbalken ausgeblendet ist) nicht sieht, dass dort noch weitere Inhalte auf der Seite folgen.

Ergänzung

Hier ist der HTML-Code für das Standard-Layout mit der entsprechenden Modifikation. Relevant ist der Teil hinter %questionnaire%. Und zwar wurde der Platzhalter %submit.buttons% ergänzt und ein Teil des Inhalts (eben die Knöpfe, der Kontrollelemente und das Impressum) in ein <div> mit der Positonsangabe fixed gepackt. Dadurch stehten diese Teile immer am unteren Ende des Bildschirms. Vorsicht also auch bei großen Bildschirmen.

<!DOCTYPE html>
<html>
<head>
%head%
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body { padding: 0 0 20px 0; margin: 0 }
div#s2t-progress { position: absolute; right: 10px; top: 0px; width: 200px }
div#s2t-logo { margin-bottom: 10px }
div.questionary { min-width: 320px; max-width: %width%; margin: 14px auto 0px auto; padding: 0 10px }

/* Center header and footer on smartphone */
@media (max-width: 450px) {
	div#s2t-logo { text-align: center; margin-bottom: 16px }
	div#s2t-controls { text-align: center }
	div#s2t-imprint { text-align: center }
	div#s2t-progress { left: 0; right: 0; margin: 0 auto }
}
</style>
</head>

<body>
<div class="questionary" style="position: relative">
%form.open%
<div id="s2t-logo">%logo%</div>
<div style="position: relative">
	<div style="padding-top: 2px; margin: 0px 0px 24px 0px; height: 10px; width: 100%; border-bottom: 2px solid %color.4%; overflow: hidden"></div>
	<div id="s2t-progress" style="background-color: #FFFFFF">%progress%<span><!-- empty span required for IE --></span></div>
</div>
<div id="s2t-content">
<div style="margin-bottom: 32px;"></div>
%questionnaire%
</div>

<div style="position: fixed; bottom: 0px; width: 100%; min-width: 320px; max-width: %width%; background-color: white; padding: 20px 0;">
%button.submit%
<hr style="margin-bottom: 14px;">
<div id="s2t-controls">
%button.control%
</div>
<div id="s2t-imprint">
%imprint%
</div>
</div>

%form.close%

</div>
</body>
</html>
by s109993 (12.0k points)
Wir verwenden eine angepasste Form des "Standard" Layouts. Wie ich oben erwähnte habe geht es erst einmal darum das die Buttons auch bei längeren Seiten sichtbar sind. Ihr Einwand, das man die unteren Fragen übersehen könnte, erscheint mir logisch- trotzdem wäre es schön die Option zu haben bzw. es einmal optisch und zwecks der usability ausprobieren zu können.
by s109993 (12.0k points)
Ich würde wahrscheinlich mit position: fixed arbeiten- aber vielleicht haben sie schon einen entsprechenden Code zur Hand- das würde mir einiges rumprobieren abnehmen :)
by SoSci Survey (328k points)
Ich habe den entsprechenden Code oben in der Antwort gerne ergänzt - und freue mich über Ihr Feedback, wie es in den Tests ankam.

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...