0

I'm making my very first full stack project. I made this blog, on which you can post and comment, and all of the 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 (which gets its data from the database table) the text overflows my div... I tried everything with CSS and bootstrap, it's 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 attempt 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 ?>
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
diemeto
  • 13
  • 1

1 Answers1

0

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.

xKobalt
  • 1,498
  • 2
  • 13
  • 19
  • i tried it, unfortunnately did not work. even when styling inline or adding !important before the semi-column. – diemeto Feb 24 '20 at 20:30
  • thanks for the help buddy, i kept searching, and i found that with php, when you try to echo text comming from a string, you have to add the following css : – diemeto Feb 25 '20 at 03:19
  • word-break: break-word; so this is gonna break your string as much as it can to make it fits in your div – diemeto Feb 25 '20 at 03:20