resizable overflow:auto handle not moving when using scrollbar
Browser: I.E. 7
JQuery: 1.3.2
UI: 1.7.2
Steps:
1. Get remote data using ajax.
2. Load remote data into div with style overflow:auto and
reportContainer class name (contains no styling)
3. Find div containing remote data based on classname
4. Make reportContainer div resizable
5. Scroll using the scroll bars
6. Notice that the handles do not scroll with the content
7. To find the handles again you must scroll back to the original
position
How do I make it so the handles stay visible and appear to move with
the content as it scrolls?
Example below (ajax content is bigger than 300x300)
$.ajax(
{
data: theData,
success: function(data)
{
$("#tabs-6").append("<div style='overflow:auto;width:300px;height:
300px;border:1px solid black' class='reportContainer'><label
class='killdiv' style='float:right;clear:both;cursor:hand'><strong>x</
strong></label></br>"+data+"</div>");
$(".reportContainer").resizable({containment: "parent"});
$(".killdiv").live("click",function(){
$(this).closest('.reportContainer').remove();
});
$.unblockUI();
alert(SetAmperVariables());
}
});