Conversation panel text slipping out of <div>

Question

Conversation panel text slipping out of <div>

I am currently working on creating a mock "chat" feature. The issue I am facing is that when I repeatedly click the "send" button, the text overflows from the div. Is there a way to prevent this by stopping the text near the border of the div or adding a scrolling feature? I can only use HTML, JavaScript, and CSS.

function postChat(){
var node = document.createElement("p");
var content= document.getElementById("comment").value;
var comment= content;
var textNode = document.createTextNode(comment);
node.appendChild(textNode);
document.getElementById("allComment").appendChild(node);
}

#chatbox {
width:50%;
text-align:left;
background-color:#F7F7F7;
height:250px;
border:1px solid black;
}

<body>
<div id="chatbox">
<div id="allComment" style="font-size:10px; line-height:90%;" ></div>
</div>
<p>
<input type="text" id="comment" />
</p>
<input type="button" value="Send" onclick="postChat()" />
</body>

javascript jquery html css chat

Answer 1

Answer №1

Apply the CSS property overflow:auto

function postchat(){
var node =document.createElement("p");
var content= document.getElementById("comment").value;
var comment= content;
var textnode = document.createTextNode(comment);
node.appendChild(textnode);
document.getElementById("allComment").appendChild(node);
}

#chatbox {
width:50%;
    text-align:left;
    background-color:#F7F7F7;
    height:250px;
    border:1px solid black;
    overflow: auto;
}

<body>
<div id="chatbox">
<div id="allComment" style="font-size:10px; line-height:90%;" ></div>
</div>
<p>
<input type="text" id="comment"></input>
</p>
<input type="button" value="Send" onclick="postchat()" />
</body>

Answer 2

Apply the CSS property overflow:auto

function postchat(){
var node =document.createElement("p");
var content= document.getElementById("comment").value;
var comment= content;
var textnode = document.createTextNode(comment);
node.appendChild(textnode);
document.getElementById("allComment").appendChild(node);
}

#chatbox {
width:50%;
    text-align:left;
    background-color:#F7F7F7;
    height:250px;
    border:1px solid black;
    overflow: auto;
}

<body>
<div id="chatbox">
<div id="allComment" style="font-size:10px; line-height:90%;" ></div>
</div>
<p>
<input type="text" id="comment"></input>
</p>
<input type="button" value="Send" onclick="postchat()" />
</body>

Answer 3

Answer №2

To create scrollbars, use the following CSS code: overflow-y: scroll;

I am having trouble reproducing the issue you described with multiple clicks on send – can you provide more details?


function postchat(){
var node =document.createElement("p");
var content= document.getElementById("comment").value;
var comment= content;
var textnode = document.createTextNode(comment);
node.appendChild(textnode);
document.getElementById("allComment").appendChild(node);
}


#chatbox {
width:50%;
text-align:left;
background-color:#F7F7F7;
height:250px;
border:1px solid black;
overflow-y: scroll;
}


<body>
<div id="chatbox">
<div id="allComment" style="font-size:10px; line-height:90%;" ></div>
</div>
<p>
<input type="text" id="comment"></input>
</p>
<input type="button" value="Send" onclick="postchat()" />
</body>

Answer 4

To create scrollbars, use the following CSS code: overflow-y: scroll;

I am having trouble reproducing the issue you described with multiple clicks on send – can you provide more details?


function postchat(){
var node =document.createElement("p");
var content= document.getElementById("comment").value;
var comment= content;
var textnode = document.createTextNode(comment);
node.appendChild(textnode);
document.getElementById("allComment").appendChild(node);
}


#chatbox {
width:50%;
text-align:left;
background-color:#F7F7F7;
height:250px;
border:1px solid black;
overflow-y: scroll;
}


<body>
<div id="chatbox">
<div id="allComment" style="font-size:10px; line-height:90%;" ></div>
</div>
<p>
<input type="text" id="comment"></input>
</p>
<input type="button" value="Send" onclick="postchat()" />
</body>

Answer 5

Answer №3

Make sure to add the CSS property overflow:auto to prevent the content of the p tag from overflowing its container.

#chatbox {
    width:50%;
    text-align:left;
    background-color:#F7F7F7;
    height:250px;
    border:1px solid black;
    overflow: auto;
}

Answer 6

Make sure to add the CSS property overflow:auto to prevent the content of the p tag from overflowing its container.

#chatbox {
    width:50%;
    text-align:left;
    background-color:#F7F7F7;
    height:250px;
    border:1px solid black;
    overflow: auto;
}

Answer 7

Answer №4

Ensure that you add overflow: auto; to the CSS of #chatbox. This will trigger a scroll bar within your #chatbox when the text exceeds the div's content.

For more detailed information on overflow, check out this resource.

overflow: auto; will automatically handle overflow for both the horizontal (X) and vertical (Y) axis.

function postchat(){
    var node = document.createElement("p");
    var content = document.getElementById("comment").value;
    var comment = content;
    var textnode = document.createTextNode(comment);
    node.appendChild(textnode);
    document.getElementById("allComment").appendChild(node);
}

#chatbox {
    width: 50%;
    text-align: left;
    background-color: #F7F7F7;
    height: 250px;
    border: 1px solid black;
    overflow: auto;
}

<body>
<div id="chatbox">
<div id="allComment" style="font-size: 10px; line-height: 90%;" ></div>
</div>
<p>
<input type="text" id="comment"></input>
</p>
<input type="button" value="Send" onclick="postchat()" />
</body>

Answer 8

Ensure that you add overflow: auto; to the CSS of #chatbox. This will trigger a scroll bar within your #chatbox when the text exceeds the div's content.

For more detailed information on overflow, check out this resource.

overflow: auto; will automatically handle overflow for both the horizontal (X) and vertical (Y) axis.

function postchat(){
    var node = document.createElement("p");
    var content = document.getElementById("comment").value;
    var comment = content;
    var textnode = document.createTextNode(comment);
    node.appendChild(textnode);
    document.getElementById("allComment").appendChild(node);
}

#chatbox {
    width: 50%;
    text-align: left;
    background-color: #F7F7F7;
    height: 250px;
    border: 1px solid black;
    overflow: auto;
}

<body>
<div id="chatbox">
<div id="allComment" style="font-size: 10px; line-height: 90%;" ></div>
</div>
<p>
<input type="text" id="comment"></input>
</p>
<input type="button" value="Send" onclick="postchat()" />
</body>

Answer 9

Answer №5

If you use either overflow:auto or overflow-y:scroll, it should solve your scrolling needs.

overflow:auto allows scrolling in all directions when necessary, while overflow-y:scroll keeps the scrolling limited to the vertical (y) axis only.

#chatbox {
width:50%;
    text-align:left;
    background-color:#F7F7F7;
    height:250px;
    border:1px solid black;
    overflow-y: scroll;
    /*  overflow: auto */
}

Answer 10

If you use either overflow:auto or overflow-y:scroll, it should solve your scrolling needs.

overflow:auto allows scrolling in all directions when necessary, while overflow-y:scroll keeps the scrolling limited to the vertical (y) axis only.

#chatbox {
width:50%;
    text-align:left;
    background-color:#F7F7F7;
    height:250px;
    border:1px solid black;
    overflow-y: scroll;
    /*  overflow: auto */
}

Conversation panel text slipping out of <div>

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Trigger a function when the value of the file input field changes using ng-change

On mobile devices, the height of the absolutely positioned element is larger than its

Implementing Module Dependencies using RequireJS

Creating clickable div elements within a loop

Unlocking the request object within a GraphQL resolver with Apollo-Server-Express

Bringing the Jquery cursor into focus following the addition of an emoji

Enhancing this testimonial slider with captivating animations

Steps to enable overflow: 'scroll' for components generated dynamically

Learn how to implement JavaScript code that allows a video to start playing only upon clicking a specific button

The Express API is failing to recognize the data keys that were sent from the React frontend, despite being clearly specified

Fresh ajax requests are not clearing the current data displayed in the JSP table

Decrease in internal width

A Beginner's Guide to Duplicating Bootstrap Containers in Jade

Unusual actions observed in ajax rails form calculator with pre-filled values

Disable the parent CSS styling when focusing on the child button

What is the best way to remove the hover effect from a specific element within a div?

How can I show a tooltip in vuetify when a button is disabled?

Don't allow users to switch views without saving their changes

Update information interactively in Vuejs for all stored data

Two interactive dropdown menus featuring custom data attributes, each influencing the options available in the other