Dialog with iframe

Dialog with iframe


Hi everybody,
I have a link who act as a dialog trigger. When the user click on the
link, I create an iframe and set his src attribute then i make a
dialog with this iframe.
var dialogurl = $(this).attr("href");
var container = $("<iframe></iframe>");
container.attr("title", container.find("title").text());
container.dialog({ bgiframe: true, modal: true, width: width,
height: height});
I need to use an iframe because she contains a form who is validated
on the server side and if I put this form on a div insted of an
iframe, the submission make url change and goes to the form's action
url.
But the iframe use only 50% of the dialog size and, of course, I don't
want that. I have tried to change the css properties for ui-dialog-
content but that change nothing.
Can you help me to solve that ?
There is the dialog code created by JQuery (retrieved with FireBug on
FireFox 3.0.7)
<div style="overflow: hidden; display: block; position: absolute; z-
index: 1002; outline-color: -moz-use-text-color; outline-style: none;
outline-width: 0px; height: 472px; width: 678px; top: 548px; left:
201px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-
draggable ui-resizable" tabindex="-1" role="dialog" aria-
labelledby="ui-dialog-title-1">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-
helper-clearfix" unselectable="on" style="-moz-user-select: none;">
<span class="ui-dialog-title" id="ui-dialog-title-1"
unselectable="on" style="-moz-user-select: none;"> 
</span>
<a href="#" class="ui-dialog-titlebar-close ui-corner-all"
role="button" unselectable="on" style="-moz-user-select: none;">
<span class="ui-icon ui-icon-closethick" unselectable="on"
style="-moz-user-select: none;">close</span>
</a>
</div>
<iframe src="/WebApp/frames/news/add.html?news=287" class="ui-dialog-
content ui-widget-content" style="height: 413px; min-height: 91px;
width: 337px;"/>
<div class="ui-resizable-handle ui-resizable-n" unselectable="on"
style="-moz-user-select: none;"/>
<div class="ui-resizable-handle ui-resizable-e" unselectable="on"
style="-moz-user-select: none;"/>
<div class="ui-resizable-handle ui-resizable-s" unselectable="on"
style="-moz-user-select: none;"/>
<div class="ui-resizable-handle ui-resizable-w" unselectable="on"
style="-moz-user-select: none;"/>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-
gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001; -
moz-user-select: none;" unselectable="on"/>
<div class="ui-resizable-handle ui-resizable-sw" style="z-index:
1002; -moz-user-select: none;" unselectable="on"/>
<div class="ui-resizable-handle ui-resizable-ne" style="z-index:
1003; -moz-user-select: none;" unselectable="on"/>
<div class="ui-resizable-handle ui-resizable-nw" style="z-index:
1004; -moz-user-select: none;" unselectable="on"/>
</div>
And then the iframe content :
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-
Type"/>
<title>Réagir à un article</title>
<!-- jQuery libraries -->
<script src="/WebApp/lib/jquery/jquery.js" type="text/javascript"/>
<script src="/WebApp/lib/jquery/jquery-ui-1.7.custom.min.js"
type="text/javascript"/>
<script src="/WebApp/lib/jquery/jquery.myutils.js" type="text/
javascript"/>
<script src="/WebApp/lib/effects.js" type="text/javascript"/>
<link href="/WebApp/css/default.css" type="text/css"
rel="stylesheet"/>
<link href="/WebApp/css/articles.css" type="text/css"
rel="stylesheet"/>
<link href="/WebApp/css/frames.css" type="text/css" rel="stylesheet"/