I've been trying to insert code into my HTML using JavaScript, but I'm facing a problem where the code is getting truncated or cut off.
Here's the snippet of code causing the issue:
function feedbackDiv(feedback_id, feedback_title, feedback_content, feedback_author) {
return querySnapshot.forEach(function(doc) {
const data = doc.data();
var feedback_title = data.title;
var feedback_content = data.content;
var feedback_author = data.author;
document.getElementById("küchen_feedback_p").insertAdjacentHTML('beforeend', feedbackDiv(doc.id, feedback_title, feedback_content, feedback_author));
});
};.küchen_co {
padding: 20px;
}
.küchen_feedback_p {
overflow-x: auto;
}
.feedback_container {
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
background-color: #212121;
color: #ffffff;
text-align: center;
}
.feedback_container:hover {
border: 1px solid #7ef6a9;
animation: color_change 1s;
background-color: #7ef6a9;
color: #212121;
}<div class="küchen_co center">
<div class="küchen_feedback_p center" id="küchen_feedback_p" style="display: none;">
</div>
<div class="noDataContainer_kfeedback_p" id="noDataContainer_kfeedback_p" style="text-align:center;">
<img src="./broken_heart.png" width="80px" height="auto" />
<p class="nothing_found_k küchenH">Es wurden derzeit keine Feedbacks abgesendet.</p>
</div>
</div>
<div class="feedback_container" id="feedbackDiv" style="width:300px; height: 250px; margin-right: 20px;">
<p id="feedback_id" style="display: none;">${feedback_id}</p>
<h1 class="" style="word-wrap: break-word;">${feedback_title}</h1>
<p class="" style="word-wrap: break-word;">${feedback_content}</p>
<p class="" id="feedback_author" style="display: none;">${feedback_author}</p>
</div>The main issue is that the content in the scrolling div appears to be cut off. You can check out the screenshot here:
~filip