I found a code snippet online to create a comment box in HTML. It's working fine, but as more comments are added, they start overflowing and don't stay within the designated box. I've tried using a div with overflow settings, but the issue persists. I'm struggling to find a solution.
Below is the CSS that I have implemented:
<style>
#details {
display : block;
background-color : #9494FF;
height : 20px;
width : 130px;
padding : 4px;
border-radius : 10px;
border : 1px solid black;
cursor : pointer;
}
summary::-webkit-details-marker {
display: none
}
textarea {
resize : none;
}
#para {
display : block;
overflow : none;
height : 200px;
width : 100%;
resize : none;
}
</style>
And here is the main code section:
<ul>
<form>
<textarea id="words" rows="3" cols="60">Enter Comment</textarea>
<input type="button" onclick="getwords()" value="Comment" /> <br>
<details id="details"><summary><center>View Comments</center></summary><div id="para"></div></details>
</form>
<script type="text/javascript">
function getwords() {
text = words.value;
document.getElementById("para").innerHTML += '<div>'+text
document.getElementById("words").value = "Enter Comment"
}
</script>
</ul>