Moin,
ich bräuchte eure Hilfe. Ich programmiere gerade eine kleine Webseite die einen Chat besitzt, welches bis jetzt super funktioniert hat, jedoch geht die Nachricht die man absendet (egal ob untereinander oder nicht) nur in einer Zeile. Ich brauche somit Hilfe um dies zu beheben, sodass die Nachricht einer neue Zeile erstellt und nicht in eine ganze Zeile geht und raus aus der Box.
Code
<html>
<head>
<title> Home Page </title>
<script src="/js_webseite/jquery.js"></script>
</head>
<body>
<style>
h2{
color:white;
}
label{
color:white;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 4px;
margin-inline-end: 4px;
overflow: hidden;
}
span{
color:#6580ff;
font-weight:bold;
}
.container {
margin-top: 3%;
margin-left: 9%;
width: 60%;
background-color: #26262b9e;
padding-right:10%;
padding-left:10%;
padding-top:1%;
padding-bottom:0.1%;
border-radius: 30px;
}
.btn-primary {
background-color: #9cbfd0;
margin-left: 44%;
font-size: 30px;
border-radius: 15px;
}
.display-chat{
height:500px;
background-color:#1e7cbc;
margin-bottom:4%;
overflow:auto;
overflow-x: hidden;
padding:15px;
margin-bottom: 2%;
border-radius: 5px;
}
.message{
background-color: #fbfcfb;
color: black;
border-radius: 5px;
padding: 1px;
margin-bottom: 3%;
}
.form-control {
width: 100%;
padding: 15px;
margin: 5px 0 10px 0;
background: #f1f1f1;
resize: none;
border-radius: 5px;
display:block;
}
</style>
<div class="container">
<center><h2>Willkommen <span style="color:#6580ff;">user !</span></h2>
<label>Trete den Chat bei</label>
</center></br>
<div class="display-chat" id="chatbox">
<script>
for(a=1;a<=9;a++){
document.write(`
<div class="message">
<p>
<span> user ${a}:</span>
Moin,
ich bräuchte eure Hilfe. Ich programmiere gerade eine kleine Webseite die einen Chat besitzt, welches bis jetzt super funktioniert hat, jedoch geht die Nachricht die man absendet (egal ob untereinander oder nicht) nur in einer Zeile. Ich brauche somit Hilfe um dies zu beheben, sodass die Nachricht einer neue Zeile erstellt und nicht in eine ganze Zeile geht und raus aus der Box.
</p>
</div>
`);
}
</script>
<!--
<div class="message">
<p>
Es gibt kein aktuellen Chatverlauf.
Sei der erste und schreib etwas.
</p>
</div>
-->
</div>
<form class="form-horizontal" method="post" action="sendMessage.php">
<div class="form-group">
<div class="col-sm-10">
<textarea name="message" class="form-control" placeholder="Schreibe eine Nachricht..." input required ></textarea>
</div>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary">Absenden</button>
</div>
</div>
</form>
</div>
<script>
$('#chatbox').animate({
scrollTop: $("#chatbox").prop("scrollHeight")}, 0
);
</script>
</body>
</html>