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

Ich habe ein Wort Zähler in SoSci eingebaut- funktioniert auch super, allerdings macht mir ein Layoutfehler zu schaffen, und ich weiß nicht wie ich es beheben kann.

Die beiden divs enden nicht auf der selben Höhe. Ich habe die Stelle im Screenshot markiert. Der Code steht unten.

Vielleicht kann mir da jemand helfen :)

<!-- Basic area of the project -->
<div class="wrapper">
<!--Result box-->
 <div class="count">
<!--Word count results-->
   <div>
     <h5 id="word-count">0</h5>
     <p>Words</p>
   </div>
<!--character count results-->
   <div>
     <h5 id="charac-count">0</h5>
     <p>Characters</p>
   </div>

 </div>

<!--A place to input content-->
 <div class="container">

</div>

</div>


<style>




/*Design of the place to see the result*/
.count {
background-color: #0547ad;
width: 100%;
padding: 7px;
position: relative;
display: flex;
font-family: sans-serif;
justify-content: space-around;
text-align: center;
border-radius: 5px 5px 0px 0px;
}
/*The text of the result*/
.count p {
color: #ceced7;
}
.count h5 {
color: #ffffff;
font-size: 22px;
}
/*input place design*/
.container {
background-color: #ffffff;
padding: 30px 20px 20px 20px;
border-radius: 0px 0px 8px 8px;
box-shadow: 0 30px 50px rgba(30, 21, 49, 0.3);
}

textarea {
width: 100%;
border: none;
resize: none;
outline: none;
font-size: 16px;
line-height: 28px;
padding: 10px;
max-height: 280px;
color: #0e101a;
box-shadow: 0 20px 65px rgba(61, 139, 190, 0.33);
}
</style>


<script>
//refer div
let inputTextArea = document.getElementById("A001_01");
let characCount = document.getElementById("charac-count");
let wordCount = document.getElementById("word-count");

 inputTextArea.addEventListener("input", () => {
//value-length command specifies the maximum value length in bytes
//textContent sets or returns the text content of the specified node
   characCount.textContent = inputTextArea.value.length;
//trim() method removes whitespace from both ends of a string
   let txt = inputTextArea.value.trim();
//txt.split(/\s+/) code will split the full classname of an element into an array containing every class
   wordCount.textContent = txt.split(/\s+/).filter((item) => item).length;
 });

</script>
by SoSci Survey (312k points)
Könnten Sie bitte einen Pretest-Link direkt (!) zur betroffenen Seite posten? Wenn man sich in der Browser-Konsole durch die HTML-Struktur und die angewendeten CSS-Befehle klicken kann (https://www.soscisurvey.de/help/doku.php/de:general:browser-tools) ist das wesentlich schneller als die Interpretation von Code :)
by s109993 (10.5k points)
selbstverständlich- das ist ein Test, es gibt also nur eine Seite bisher:
https://odc.iea-hamburg.org/icils2023-ncq/?act=45jffeCJwaJjVqFwPOlseKa8

1 Answer

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

Aktuell zählt Ihre Box zu den 100% Breite noch 2-mal 7 Pixel Padding obendrauf.

Lösung 1: Lassen Sie das width: 100% in der CSS-Definition für .count weg.

Lösung 2: Ergänzen sie ein box-sizing: border-box; in selbiger CSS-Definition.

Zum Nachlesen: CSS Box Sizing

by s109993 (10.5k points)
Klasse, vielen Dank!

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

...