html – text overflowing div with php echo-ThrowExceptions

Exception or error:

sorry if my english is bad.

I’m actually making my very first full stack project. I made this blog, on wich you can post and comment, and every posts and comments are stored in a mysqli database.

to get all the data in the database when you load a page, i use php to store all of those datas in an array, and then echo those datas on the web page.

the part where it sets, get and shows the data on the page is fine. BUT !!!

when i echo the data from the array (wich gets its data from the database table) the text overflows my div…. i tried everything witch css and bootstrap, its not working.

I don’t know why, I tried many things and i’ve been stuck on this for the last 2 days.

and forgive me for the bad practices of my code, i’m junior and mostly front-end. This is my first attemp for a full stack project, so i’m learning on my own while coding this.

 <?php foreach($datas as $value): ?>

<?php 


$id = $value['id'];
echo $id;

$imgSrc = $value['image'];

echo
"<div class='container-fluid' style='text-align: center; padding: 5% '>
<div class='row'>
<h1 id='titlePost' class='col-md-8 mx-auto'>" . $value['title'] . "</h1>".
"<hr class='w-50' style='height: 6px; background-color: #03fc84 !important;  margin-left: auto; margin-right: auto;'>".
"
<div class='row col-12'>
<img src='$imgSrc' class='img-fluid col-md-4 mx-auto'>
</div>

<div class='container-fluid'>
 <div class='row col-12'>
    <p class='col-md-8' >" . $value['description'] . "</p>
</div>
</div>
".
    "<p style='color: black;  background-color: #03fc84;' class='w-50 mx-auto'>" . $value['date'] . "</p>".


    "<div class='container-fluid'>
    <div class='row col-md-12'>
    <form action='".setComments($conn, $id, $sessionComments)."' method='post' enctype='multipart/form-data' class='col-md-8 mx-auto'>

    <input name='comments' type='text' class='form-control' id='exampleFormControlInput1' >

Select image to upload:

<button type='submit' name='commentSubmit$id'  id='btnSend' class='w-25 mx-auto btn btn-primary'>Comment
<i class='fas fa-paper-plane' style='font-size: 2.5rem; color : #ff6016; display: inline-block;'></i>
</button>


    </form>
    ".

"
</div>
</div>
</div>
</div>"; 

// afficher les commentaires
getComments($conn, $commentsArray, $id);


?>




<?php endforeach ?>
How to solve:

You can check this link, it explains how to make a div height depend by its content, the same thing can work with the width property (obviously it depends by the code you write).

Otherwise, if you don’t like this solution, I have to ask you if you ever tried overflow-x: scroll; (width overflow) and/or overflow-y: scroll; (height overflow): these properties, with these values, allow you to adapt the divs with a specified size (like: width: 100px or also width: 100px), just to be able to scroll their content.

I hope I helped you to fix this issue.
By the way, I want to give you a tip about this community: to get faster and better questions you should give your CSS code, too.

Leave a Reply

Your email address will not be published. Required fields are marked *