Resizable modal dialog, iframe and scrollbar issue

Resizable modal dialog, iframe and scrollbar issue


Hi folks
I've built a modal dialog loading content from another URL via an
iframe. See screenshot: http://www.sac.ac.uk/static/scrollable_modal.jpg
The right-hand drag handle generated by the parent resizable div (it's
classed "ui-dialog flora ui-draggable ui-resizable") sits directly
above the iframe's scrollbar when the loaded content is taller than
the height of the iframe.
Using Firebug I can fix this by tweaking the width of the "ui-dialog
flora ui-draggable ui-resizable" div so it's 6px wider, but I can't
figure out how to via jQuery.
I'm calling the dialog via a custom function I've created:
http://www.sac.ac.uk/resources/javascript/modalDialog.js
Trying to fix the width of the "ui-dialog flora ui-draggable ui-
resizable" div somewhere within the $("."+modal_i).click(function() -
from line 22 onwards - doesn't work, I'm guessing because the element
I'm trying to target doesn't yet exist in the DOM, or the fix is being
overridden by something that's called afterwards.
Any advice, assistance appreciated...
Best Regards
David Healy
Web Designer
Scottish Agricultural College
http://www.sac.ac.uk