tipolitomitchellea
New Member
I am trying to create a resizable chatbox.I almost have it, except when I resize the bottom part gets detached, and I can't make the userList a fixed size, that won't be affected by the resize.jsbin.HTML: <div id="chatWindow"> <div id="dragBar"></div> <div id="container"> <div class="content"> <p>aici vine niste text</p></div> <div class="content"> <p>aici vine niste text</p></div> </div> <div id="usersList"> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> <div class="user"></div> </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{ position:relative; background-color:#CCC; height:88%; width:25%; position:relative; float:right; overflow-y:scroll;}#dragBar{ background-color:darkblue; width:750px; min-height:23px; max-height:23px;}#container{ float:left; width:75%; height:88%; background-color:#CCC; clear:both; overflow-y:scroll; word-wrap:break-word;}.content{ width:95%; min-height:10px; background-color:lightgray; float:left; margin:5px; clear:both;}#inputTxt{ position:absolute; width:100%; height:25px; background-color:green; clear:both; bottom:0px;}.user{ margin:4px; width:150px; height:30px; background-color:white; margin-left: auto ; margin-right: auto ;}JS:$(function() { $( "#chatWindow" ).resizable({ alsoResize: '#dragBar', }); });