Jump to content

comments spilling out of my comment box


nigsrasta
Go to solution Solved by cyberRobot,

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 post-203723-0-99868100-1488994619_thumb.pngpost-203723-0-49671600-1488994602_thumb.png

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.