I've recently developed a chatroom using li elements, but I'm encountering an issue where the chat doesn't stick to the bottom once it reaches a certain number of messages. I suspect it has something to do with the height settings, but I can't seem to pinpoint the exact problem. Here's a snippet of my HTML code:
<div id="chat-main">
<ul id="chat-list">
//I use ajax to dynamically add <li> elements here
</ul>
</div>
<div id="message-panel">
<form class="form-inline" id="messageForm">
<input id="message-value" type="text" autocomplete="off" maxlength="510" placeholder="Type your message...">
</form>
</div>
Below is a snippet of my CSS that might be relevant:
#chat-main {
height: 84%;
border: 2px solid #d8d7cf;
}
#chat-list {
height: 100%;
overflow-y: scroll;
}
#chat-main>ul {
padding-left: 10px;
list-style-type: none;
}
In order to handle scrolling, I have this jQuery code in place:
$("#chat-list").animate({ scrollTop: $(document).height() }, "slow")
I'm currently at a loss and would appreciate any insights or suggestions on what could be causing this issue.
Edit: For further clarity, here's a link to a jsfiddle with additional test data to illustrate the problem: