Unterhalb des Datenlayouts bewegt sich die Einstellungsanzeige nach oben: keine

Question

Ich entwickle eine HTML/JS-Seite. Es hat 2 Container - container1 und container2.

In Container1 habe ich ein Bestellformular. Und in container2 gibt es einige andere Texte und Bilder. In der Ansicht befindet sich container1 auf der Oberseite und container2 auf der Unterseite.

Also, was ich tue, ist in Container1 - Nach dem erfolgreichen Absenden des Bestellformulars, verbirgt es das Formular und zeigt Auftragsbestätigung Nachricht anstelle des Formulars. Der folgende Code funktioniert gut für mich:

document.getElementById('form').style.display = 'none'; // hide form 
document.getElementById('confirmation_message').style.display = 'block'; //display confirmation message 

Es versteckt das Formular und zeigt die Bestätigungsmeldung wie erwartet.

Aber die Problem Ich bin konfrontiert ist - nach der Ausführung des oben genannten Codes Container2 Daten bewegt sich auch nach oben und kommt auf Container1 (direkt unter der Bestätigungsmeldung). Auch wenn ich weiß, wenn ich die Seite heranzoomen und verkleinern, werden die container2-Daten automatisch korrekt auf container2 gesetzt. Könnten Sie bitte helfen, was ich vermisst habe.

Bitte überprüfen Sie bookmywatercan.com. Ich habe dort eine Dummy-Demo-Seite hochgeladen. Füllen Sie das Formular aus und senden Sie es. Vielen Dank Chaos kommt dann sehen Sie den Inhalt nach oben verschoben. Bitte helfen Sie. Ich brauche unten Inhalt am selben Ort und container1 in organisierter Form.

Vielen Dank.

Answer 1

Wenn ich Ihr Problem richtig verstehe, wenn Sie möchten, dass container2 an der gleichen Stelle bleibt, müssen Sie den Wert visibility auf "hidden" setzen und nicht den Wert display auf "none" setzen.

Einer der Unterschiede zwischen den beiden ist, dass visibility: hidden; die Elemente innerhalb des Layouts der Seite beibehalten wird, während display: none; das Element behandeln wird, als ob es nicht einmal existiert.

So versuchen, diese stattdessen für die erste Zeile:

document.getElementById('form').style.visibility = 'hidden'; // hide form