I need help creating a chatbox that can be resized. I've almost got it, but the bottom part of the chatbox detaches when I resize it. Also, I'm having trouble making the userList a fixed size that won't be affected by resizing.
HTML:
<div id="chatWindow">
<div id="dragBar"></div>
<div id="container">
<div class="content">
<p>Some text here</p></div>
<div class="content">
<p>More text here</p></div>
</div>
<div id="usersList">
... <!-- User list items -->
</div>
<div id="inputTxt"></div>
</div>
CSS:
body{
background: #e6e6e6
}
#chatWindow{
width:750px;
height:400px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:darkgray;
}
#usersList{
... <!-- Users list styles -->
}
#dragBar{
... <!-- Drag bar styles -->
}
#container{
... <!-- Container styles -->
}
.content{
... <!-- Content styles -->
}
#inputTxt{
... <!-- Input text styles -->
}
.user{
... <!-- User styles -->
}
JS:
$(function() {
$( "#chatWindow" ).resizable({
alsoResize: '#dragBar',
});
});