css - Jquery resizable reposition handle after scroll -
i have html table within container. container has height, , overflow y set auto create scrollbar
.table-container { height: 175px; border-bottom: 2px solid #eeeeee; overflow-y: auto; }
i have made container resizable using jquery ui resizable.
$(function () { $(".table-container").resizable({ handles: "s" }); });
unfortunately when use scrollbar resizable handles moves. stay @ bottom of container. here fiddle.
you use jquery maintain position of handle during drag based on position of drag.
here full update 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'); }
Comments
Post a Comment