I have a problem creating a commentbox in PHP. I've created this commentbox from a simple tutorial and created a database with MySQL and it works fine. The only problem is, the table won't expand when more text than the quantity that can fit on 1 row is send. Instead, the text in the comments just stays on 1 row and breaks through the right column of my website, which looks ridiculous (See the picture in the attachment).

How can I make the comment text in the tabel expand to more rows and keep it within the margins of my page? I'm new at working with PHP, but you can probably see that :P )

Thank you in advance!

<?php
require('connect.php');
$name=$_POST['name'];
$comment=$_POST['comment'];
$submit=$_POST['submit'];

if($submit)
{
	
if($name&&$comment)

{
	$insert=mysql_query("INSERT INTO comment (name,comment) VALUES ('$name', '$comment')");
	header("Location: success.php");


}

else

{
	echo "Please fill out all the fields.";
}

}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>

<form action="index.php" method="POST">
<table>
<tr><td>Name: </td> <td><input type="text" name="name" /></td> </tr>
<tr><td colspan="2">Comment: </td></tr>
<tr><td colspan="2"><textarea name="comment"></textarea></td></tr>
<tr><td colspan="2"><input type="submit" name="submit" value="comment"/></td></tr>
</table>
</form>

<?php
$getquery=mysql_query("SELECT * FROM comment ORDER BY id DESC");
while($rows=mysql_fetch_assoc($getquery))
{
	$id=$rows['id'];
	$name=$rows['name'];
	$comment=$rows['comment'];
	
	$linkdel="<a href=\"delete.php?id=" . $rows['$id'] . "\">Delete user</a>";
	echo '<font color="blue">Naam: </font>' . $name . '<br />' . '<br />' . $comment  . '<br />' . $dellink . '<br />' . '<hr align="center" size="1px" width="100%" color="black" />';
	
}	
?>
</body>
</html>

You can use wordwrap function in php to break the strings in to new line.

wordwrap($comment, 20, "<br />\n")

I already tried that before, but I can't make it work for some reason. I'm probably doing something wrong.

Could you put the code inside my code or point out where I have to write it, so it's on the right place?

Thanks for the quick reaction!

You can use wordwrap function in php to break the strings in to new line.

wordwrap($comment, 20, "<br />\n")

I already tried that before, but I can't make it work for some reason. I'm probably doing something wrong.

Could you put the code inside my code or point out where I have to write it, so it's on the right place?

Thanks for the quick reaction!

Replace your existing echo statement which is inside the while loop by the below code.

echo '<font color="blue">Naam: </font>' . $name . '<br />' . '<br />' . wordwrap($comment, 20, "<br />\n")  . '<br />' . $dellink . '<br />' . '<hr align="center" size="1px" width="100%" color="black" />';
commented: Helped me align my comment box using wordwrap +1

Replace your existing echo statement which is inside the while loop by the below code.

echo '<font color="blue">Naam: </font>' . $name . '<br />' . '<br />' . wordwrap($comment, 20, "<br />\n")  . '<br />' . $dellink . '<br />' . '<hr align="center" size="1px" width="100%" color="black" />';

I already tried that before myself, but it didn't change anything... Text is still outside the margins. I don't understand. This is very annoying. Any clue about what else could be wrong, or why the word wrap doesn't work?

Again, thank you for your help

Member Avatar for diafol

Long words can't be wrapped. If you want to break them, you need to break them in code, e.g. checking word lengths and inserting <br />. This is ugly though, and for it to work you'd probably need to use a monospace font. Even then spacing may differ on different browsers and different screens.

How about using

overflow-x:scroll;
commented: Solved my problem using wordwrap +1

Long words can't be wrapped. If you want to break them, you need to break them in code, e.g. checking word lengths and inserting <br />. This is ugly though, and for it to work you'd probably need to use a monospace font. Even then spacing may differ on different browsers and different screens.

How about using

overflow-x:scroll;

I see. Word wrap works fine with normal words, thank you! That almost solves my problem, because nobody will type such long words.

Still it would be good to eliminate the problem. I've tried the overflow-x:scroll; and that is just what I need for my comments. The only problem was that it messed up the layout of my page (the commentbox was suddenly beneath the comments and some other errors).
Again, it could be possible that I put it on the wrong place in my code. Could you place the overflow-x:scroll; on the right place in my code for me?

Member Avatar for diafol

Sorry, that's up to you to figure out. You've got all the CSS, I could only guess as to the rules employed. If you've got floated elements, that could cause a problem - so use a 'clear:both' or similar as soon as possible after this.

You may find that placing each comment inside another div may help - but this is wasteful and would be my last suggestion after everything else was tried.

commented: using x-overflow solved my problem, thank you +1

Sorry, that's up to you to figure out. You've got all the CSS, I could only guess as to the rules employed. If you've got floated elements, that could cause a problem - so use a 'clear:both' or similar as soon as possible after this.

You may find that placing each comment inside another div may help - but this is wasteful and would be my last suggestion after everything else was tried.

I agree, I think the problem is caused by the main column <div>
I think I will be able to work it out myself. Thank you for your tips, help and quick response, I appreciate it very much. Thread is solved :)

Sorry, that's up to you to figure out. You've got all the CSS, I could only guess as to the rules employed. If you've got floated elements, that could cause a problem - so use a 'clear:both' or similar as soon as possible after this.

You may find that placing each comment inside another div may help - but this is wasteful and would be my last suggestion after everything else was tried.

After letting it rest for a week I tried the x-overflow again today and it works great. Stupid me placed the code on the wrong place in the script last week :) So now my problem is truly fixed. Again thank you!

Hi,think you’ve made some truly interesting points. Not too many people would actually think about this the way you just did. I’m really impressed that there’s so much about this subject that’s been uncovered and you did it so weloracle brain dumps\\

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.