Jquery resizable reposition handle after scroll

Question

I have an html table within a container. the container has a height, and its overflow y set to auto to create a scrollbar

.table-container {
   height: 175px;
    border-bottom: 2px solid #EEEEEE;
    overflow-y: auto;

}

I have also made the container resizable using JQuery UI resizable.

$(function () {

$(".table-container").resizable({ handles: "s" });
});

unfortunately when I use the scrollbar my resizable handles moves. I would like for it to stay at the bottom of the container. here is the fiddle.

https://jsfiddle.net/oyb3r6u8/1/enter link description here

Answer 1

You could use jquery to maintain the position of the handle during the drag based on the position of the drag.

Here is the full update to your code: https://jsfiddle.net/k3e5ma2s/

$(function () {

    $(".table-container").resizable({ handles: "s", resize: updateHandle });

    $( ".table-container" ).scroll(function() {
        updateHandle();
    });

    updateHandle();

});

function updateHandle() {
    table = $('.table-container');
    var bottom =  table.scrollTop() + table.outerHeight(true) - $('.ui-resizable-handle').outerHeight() - 5;
    $('.ui-resizable-handle').css('top', bottom + 'px');
}