As I said the solution here, wasn't perfect for me, but it was close. I had to take out bottom: 0; from the new container I added and swapped it for top: 80% !important; The code looks like this:
resize.js:
$(function() {
var resize_container = $("<span />", {class: "resize_container"});
var container = $("<ul />", { class: "container_t" });
container.resizable({ handles: "n" });
var header = $("<li />", { class: "header_t" });
var content_container = $("<li />", { class: "content_container_t" });
container.append(header);
container.append(content_container);
resize_container.append(container);
$('body').append(resize_container);
});
style.css:
.resize_container {
position: fixed !important;
top: 79% !important;
left: 0px !important;
}
.container_t {
list-style: none;
bottom: 0px;
left: 0px;
width: 350px;
height: 150px;
background-color: red;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header_t {
width: 100%;
height: 35px;
background-color: blue;
padding: 5px;
box-sizing: border-box;
}
.content_container_t {
width: 100%;
height: 70%;
background-color: green;
padding: 5px;
box-sizing: border-box;
}
.ui-resizable-n {
cursor: n-resize;
border-top: 5px solid purple;
}
ui-resizable-e {
cursor: e-resize;
border-right: 5px solid purple;
}