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.
PHP
<?php
session_start();
if(isset($_SESSION['benutzername']))
{
$con = mysqli_connect('localhost','root','abc');
mysqli_select_db($con, 'message');
$sql="SELECT * FROM `nachricht`";
$query = mysqli_query($con,$sql);
?>
<html>
<head>
<title> Home Page </title>
<link rel="stylesheet" href="chat.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<header>
<nav>
<ul >
<li><a href="logout.php" class="logout">LOGOUT</a></li>
<li class="mitte"><a href="abstimmung.php">ABSTIMMUNG</a></li>
<li class="mitte"><a href="chat.php">CHAT</a></li>
<a href="home.php"><img class="logo" src="img/szut.jpg" alt="ssss"></a>
</ul>
</nav>
</header>
<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;"><?php echo $_SESSION['benutzername']; ?> !</span></h2>
<label>Trete den Chat bei</label>
</center></br>
<div class="display-chat" id="chatbox">
<?php
if(mysqli_num_rows($query)>0)
{
while($row= mysqli_fetch_assoc($query))
{
?>
<div class="message">
<p>
<span> <?php echo $row['name'];?>:</span>
<?php echo $row['message']; ?>
</p>
</div>
<?php
}
}
else
{
?>
<div class="message">
<p>
Es gibt kein aktuellen Chatverlauf.
Sei der erste und schreib etwas.
</p>
</div>
<?php
}
?>
</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>
<?php
}
else
{
header('location:home.php');
}
?>
Alles anzeigen