I have a JQuery UI Dialog set up on my page that gets populated with some information (a table and a form) and then displayed with
$("#dialogbox").dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 500
});
This works perfectly fine in FF but fails horribly in IE7. The problem is that, no matter what I do, the dialog renders at about 1/2 the width of the content, cutting off the other half.
I've pinged the CSS width on the outer div and the inner div of the dialog with $("#dialogbox").css("width") and $("#dialogbox").parent().css("width") - the inner one resolves to 'auto' and the outer to '500', which would be good, except it still renders at about half that width.
Another strange thing: when I set 'resizable: true' on the box itself, it resizes, but only the content resizes horizontally - the outside portion of the box only resizes vertically and stays fixed at its half-width size.
Has anybody else had this problem, and, if so, how have they fixed it?