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

Optimize data storage with javascript on Otree

Are 'const' and 'let' interchangeable in Typescript?

New example of how to use the "useSession" syntax in Next Auth

Creating an engaging layout with Bootstrap 3: Utilizing grid systems for video integration

Display a preview image at the conclusion of a YouTube video

What is causing the button on the update div to not respond when clicked after receiving a Jquery ajax response?

Improving the efficiency of checking roles in Discord.js

Encountering a 404 error indicating that the file cannot be found while attempting to log into an authentication system developed using express and node

How to create a dynamic background color animation in jQuery similar to a progress bar animation

Is there a way to customize the progress bar percentage in Ant design?

Enhancing the readability of modals with Angular Dialog Service

streaming audio data from a MongoDB database to an HTML audio element

"Divs of the same type automatically adjust size to fit within the

The color is missing in the custom button of Bootstrap v5.2

Troubleshooting issue: AngularJS - Updating variables in view without utilizing scope

Modifying the appearance of radio buttons using jQuery

Angular.js enables the ability to display views from several partials that are loaded dynamically

Incorporating an offset with the I18nPluralPipe

observing the value of the parent controller from the UI router state's resolve function

Preventing document.getElementById from throwing errors when the element is null