CODEWITHSUNDEEP
javascriptjqueryhtmlcsschat
Roy Johnson
Roy Johnson

Reputation: 95

Chatbox text escapping <div>

Right now i want to create a fake "chat" feature. problem now is that when i click "send" over and over again the text escapes the div. is there a way to make it so that when the text in the div is nearing the div border it will stop or make a scrolling feature. I only can 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"></input>
</p>
<input type="button" value="Send" onclick="postchat()" />
</body>

Upvotes: 0

Views: 313

Answers (5)

Karl Brown
Karl Brown

Reputation: 896

Using either overflow:auto or overflow-y:scroll should work for you.

overflow: auto will scroll in all directions if necessary, while overflow-y: scroll will keep the scrolling to just the vertical (y) axis. 

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

Upvotes: 0

JoSSte
JoSSte

Reputation: 3372

Here is how you make the scrollbars: overflow-y: scroll; - see below.

I cant replicate the described behaviour on multiple clicks on send - could you elaborate?

	 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>

Upvotes: 0

GibboK
GibboK

Reputation: 73978

Set overflow: auto; on your CSS for #chatbox, so when the text will be over the content of your div, the scroll bar will appear on your #chatbox.

More info about overflow here.

overflow: auto; will detect automatically overflow for X and Y.

	 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>

Upvotes: 0

Josh Stevens
Josh Stevens

Reputation: 4221

you need overflow:auto this will not allow the p tag to overflow the container. 

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

Upvotes: 0

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Set 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>

Upvotes: 1

Related Questions