0 votes
in SoSci Survey (English) by s292533 (125 points)
edited by SoSci Survey

I need that the button "next" stay down and the button "back" up in the page, but when I configure this in the Layout HTML the back button shows but does not work anymore :-(

The placeholder %button.back% shows the back button but without function. When I put the placeholder %button.submit% I am getting the next button and if the side has the config option('backbutton',true); I'm getting the back button too and they are both working. how can I fix the function of they placeholder %button.back%, cause I really need the buttons to be in different places in the screen.

P.S. the placeholder %button.next% works fine

<!DOCTYPE html>
<html>
<head>
%head%
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
/* Fügt einen Abstand am unteren Rand des Body hinzu */
body { padding-bottom: 20px }

/* Definiert die Eigenschaften des Containers für das Frageformular */
div.questionary { min-width: 320px; max-width: %width%; padding: 0 10px; margin: 0 auto; box-sizing: border-box; }

/* Stil für das Logo des Frageformulars */
div#s2t-logo { margin-top: 18px }

/* Stellt sicher, dass das Logo die volle Breite einnimmt, aber die Proportionen beibehält */
img.s2-logo { max-width: 100%; vertical-align: top }

/* Stil für den Fortschrittsbalken, der rechts oben positioniert ist */
div#s2t-progress { width: 200px; float: right; margin: 0 0 20px 32px }

/* Abstandseinstellungen für den Weiter-Button */
.buttonNext { padding-top: 0; padding-bottom: 16px }

/* Grundlegendes Styling für den Fortschrittsbalken */
div.progressbar { height: 20px; border-color: #AAAAAA }

/* Positioniert den Fortschrittstext innerhalb des Fortschrittsbalkens */
div.progressbar div.progresstext { top: 4px }

/* Stil für horizontale Trennlinien (hr) */
hr { height: 2px; border: 0px; background-color: transparent; border-bottom: 2px solid %color.4%; margin: 24px 0px 28px 0px; }

/* Deaktiviert die Unterstreichung von Links */
a { text-decoration: none; }

/* Passt die Position der Buttons an */
div#button-container {
  display: flex;
  justify-content: flex-end;
  gap: 10px; /* Abstand zwischen den Buttons */
  margin-bottom: 10px; /* Abstand oberhalb der unteren Linie */
}

div#button-container-back {
  display: flex;
  justify-content: flex-end;
  gap: 10px; /* Abstand zwischen den Buttons */
  margin-bottom: 10px; /* Abstand oberhalb der unteren Linie */
}

/* Entfernt den Standardabstand für die Button-Container */
div#s2t-controlsBack, div#s2t-controls {
  margin: 0;
  padding: 0;
}

/* Fügt Abstand oberhalb des Zurück-Buttons hinzu */
div#s2t-controlsBack {
  margin-top: 10px; /* Abstand zwischen dem Button und der oberen Linie */
}

/* Fügt Abstand oberhalb des Weiter-Buttons hinzu */
div#s2t-controls {
  margin-top: 10px;
}

/* Zentriert den Footer auf Smartphones */
@media (max-width: 450px) {
  div#button-container {
    justify-content: center; /* Zentriert die Buttons auf kleinen Bildschirmen */
  }
  div#s2t-progress { left: 0; right: 0; margin: 0 auto 10px auto; float: none }
  div#s2t-footer { text-align: center }
}

/* Verhindert das automatische Zoomen bei Eingabefeldern auf iOS-Smartphones */
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width:1024px) { 
  select,
  textarea,
  input[type="text"],
  input[type="number"],
  input[type="password"] { font-size: 16px }
}
</style>
</head>
<body>
<div class="questionary">
 
    <div id="s2t-controls">
      %button.back% <!-- Platzhalter für den Zurück-Button -->
    </div>
    
    <div id="s2t-logo">%logo%</div> <!-- Platzhalter für das Logo -->
    
    <hr style="margin-top: 12px;"> <!-- Horizontale Linie nach dem Logo -->
  
    %form.open% <!-- Öffnet das Formular -->
    
    <div id="s2t-content">
      %questionnaire% <!-- Platzhalter für den Inhalt des Fragebogens -->
    </div>
  
    <!-- Container für die Buttons -->
    <div id="button-container">
      <div id="s2t-controls">
        %button.next% <!-- Platzhalter für den Weiter-Button -->
      </div>
    </div>
  
    <hr style="margin-bottom: 14px;"> <!-- Horizontale Linie vor dem Footer -->
    
    <div id="s2t-footer">
      <div id="s2t-progress">%progress%</div> <!-- Platzhalter für den Fortschrittsbalken -->
      %imprint% <!-- Platzhalter für Impressum/weitere Informationen -->
    </div>
    
    %form.close% <!-- Schließt das Formular -->
</div>
</body>
</html>

1 Answer

+1 vote
by SoSci Survey (323k points)

It is important to place all buttons between

%form.open%

and

%form.close%

You can move these tag that will be transformed into <form> ... </form> to different locations, as long as both are on the same level in the HTML hierarchy.

by s292533 (125 points)
it works!!! tks!!! :-)

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

...