nigsrasta Posted February 28, 2017 Share Posted February 28, 2017 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 - <?phpfunction 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 Quote Link to comment Share on other sites More sharing options...
AzeS Posted February 28, 2017 Share Posted February 28, 2017 https://youtu.be/gfmmpRt8Wk4Look, 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. Quote Link to comment Share on other sites More sharing options...
redarrow Posted March 1, 2017 Share Posted March 1, 2017 Is the order correct cid should be uid Quote Link to comment Share on other sites More sharing options...
nigsrasta Posted March 6, 2017 Author Share Posted March 6, 2017 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. Quote Link to comment Share on other sites More sharing options...
nigsrasta Posted March 6, 2017 Author Share Posted March 6, 2017 Is the order correct cid should be uid Thanks for the reply but after changing it, it stopped working. Thanks any way. Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted March 6, 2017 Share Posted March 6, 2017 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. Quote Link to comment Share on other sites More sharing options...
nigsrasta Posted March 6, 2017 Author Share Posted March 6, 2017 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. Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted March 7, 2017 Share Posted March 7, 2017 ...how do - 1- I add a screen? Click the "More Reply Options" under the reply box. From there, you can upload an attachment. Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted March 7, 2017 Share Posted March 7, 2017 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/ Quote Link to comment Share on other sites More sharing options...
nigsrasta Posted March 8, 2017 Author Share Posted March 8, 2017 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 Quote Link to comment Share on other sites More sharing options...
Solution cyberRobot Posted March 8, 2017 Solution Share Posted March 8, 2017 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 Quote Link to comment Share on other sites More sharing options...
nigsrasta Posted March 8, 2017 Author Share Posted March 8, 2017 Hi CyberRobot You are the man! Thanks I didn't even think about trying it with normal text! Once again thank you!!! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.