comments spilling out of my comment box

[nigsrasta]

Hi

I've created my database & the code to collect my data & show it on my web page. However when I scale the page the comments on the page spill over & do not scale with the comment box I've created (I'm using the bootstrap frame & adding my php code)

 

This the code php code i have  -

<?php

function setComments($conn)  {
    if (isset($_POST['commentSubmit'])) {
        $uid = $_POST['uid'];
        $date = $_POST['date'];
        $message = $_POST['message'];
        
        $sqli = "INSERT INTO comments (uid, date, message) VALUES ('$uid', '$date', '$message')";
        $result = mysqli_query($conn, $sqli);
    }
    
}

function getComments($conn) {
    $sqli = "SELECT * FROM comments order by cid desc";
    $result = mysqli_query ($conn, $sqli);
    while ($row = mysqli_fetch_assoc($result)) {
        echo"<div class='comment-box'><p>";
            echo $row['uid']."<br>";
            echo $row['date']."<br>";
            echo nl2br($row['message']);
        echo "</p></div>";
    
    }    
}

 

and this is the css code -

.comment-box {
    width: 100%;
    height:auto;
    padding:5px;
    margin-top:0px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 4px;
}

.comment-box p {
    font-family: 'cooper black';
    font-size: 14px;
    line-height: 16px;
    color: green;
    font-weight: 100;
}

 

I've been on this for almost two days & cannot see why it will work.

 

Any help would great.

Thanks in advance

[AzeS]

https://youtu.be/gfmmpRt8Wk4

Look, in php all seems right to me, but please take a look at PDO i think its much more safe than your stuff, thats my opinion, because if i get able to dump your $conn, $sqli variables youre messed up.

the tutorial i posted above covers all your questions so please dont try to be a expert if you arent an expert and learn from google as all people do at the beginning, after that more complex problems accur and then ask questions, its dosent ment to be offensiv. but just an reminder that other people also have questions and theyre much more complex then yours.

[redarrow]

Is the order correct cid should be uid

[nigsrasta]

https://youtu.be/gfmmpRt8Wk4

 

Look, in php all seems right to me, but please take a look at PDO i think its much more safe than your stuff, thats my opinion, because if i get able to dump your $conn, $sqli variables youre messed up.

 

the tutorial i posted above covers all your questions so please dont try to be a expert if you arent an expert and learn from google as all people do at the beginning, after that more complex problems accur and then ask questions, its dosent ment to be offensiv. but just an reminder that other people also have questions and theyre much more complex then yours.

Thanks for the reply, but i did foolow a tutorial & posted on the page that i was having this problem. I got no reply hence why I asked in here.

[nigsrasta]

Is the order correct cid should be uid

Thanks for the reply but after changing it, it stopped working. Thanks any way.

[cyberRobot]

Could you provide a little more information by what you mean by spill over? Maybe a screenshot?

 

When using the following test code, I see that the vertical scrollbar appears because the comments box is too wide for the screen:

<style type="text/css">
.comment-box {
    width: 100%;
    height:auto;
    padding:5px;
    margin-top:0px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 4px;
}
 
.comment-box p {
    font-family: 'cooper black';
    font-size: 14px;
    line-height: 16px;
    color: green;
    font-weight: 100;
}
</style>
<div class='comment-box'><p>Here are some comments. The comments will be really long to see how the comments box works. So here we go. Let's add a few more sentences so that the box can be tested properly. That should be good.</p></div>

Is that the issue you are describing? If so, the issue goes away for me with I remove the "width: 100%;" declaration for the <div> tag. With the 100%, CSS make the <div> tag fill the space entirely. Then it adds 5 pixels to each side from the padding declaration. So you have 100% + 10px.

[nigsrasta]

Could you provide a little more information by what you mean by spill over? Maybe a screenshot?

 

When using the following test code, I see that the vertical scrollbar appears because the comments box is too wide for the screen:

<style type="text/css">
.comment-box {
    width: 100%;
    height:auto;
    padding:5px;
    margin-top:0px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 4px;
}
 
.comment-box p {
    font-family: 'cooper black';
    font-size: 14px;
    line-height: 16px;
    color: green;
    font-weight: 100;
}
</style>
<div class='comment-box'><p>Here are some comments. The comments will be really long to see how the comments box works. So here we go. Let's add a few more sentences so that the box can be tested properly. That should be good.</p></div>

Is that the issue you are describing? If so, the issue goes away for me with I remove the "width: 100%;" declaration for the <div> tag. With the 100%, CSS make the <div> tag fill the space entirely. Then it adds 5 pixels to each side from the padding declaration. So you have 100% + 10px.

Hi

Thanks for the reply but how do -

1-  I add a screen?

2- Add you as friend?

 

The problem I'm having is once the comment before it has been made sits in the comment box fine, but when its displayed on the webpage it spills outside the comment box. The comment box will scale down for a mobile but the text will not. Once I find out how to post a screen shot I think will understand better. Thanks.

[cyberRobot]

...how do -

1-  I add a screen?

 

Click the "More Reply Options" under the reply box. From there, you can upload an attachment.

[cyberRobot]

Also, are you familiar with the code inspector available in browsers like Chrome? The inspector may provide clues as to what is causing the issue. More information can be found here:

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

[nigsrasta]

Hi CyberRobot,

yes I am familiar with it & I did use it to try & see what was wrong but I couldn't see any thing.

 

Here are the screen shots

The larger pic is what happens when the post is posted on the page & the smaller one is when the screen is scaled down. The white box scales fine but the text will not follow suit.

 

Thanks

[cyberRobot]

Does the box scale for normal words?

 

If you are expecting strings like the ones shown in the screenshots, you could look into CSS' overflow property:

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

[nigsrasta]

Hi CyberRobot

You are the man!

 

Thanks I didn't even think about trying it with normal text!

 

Once again thank you!!!