[JQuery] Dialog avec IFrame. 50% de l'espsce

Invité · 16/03/2009, 13h15

Bonjour tout le monde;

En utilisant JQuery, je me suis crée un dialogue qui contient une iframe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
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});

Malheureusement l'iframe utilise seulement 50% de la largeur de la dialogue et je ne parviens pas à lui faire utiliser toute la largeur.

L'un d'entre vous peut-il m'aider ?

Voici le code du dialogue crée par JQuery (récupèré avec Firebug sur Furefox 3.0.7)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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>

Et le contenu de l'iframe:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<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"/
>
</head>
<div id="_firebugConsole" style="display: none;"
FirebugVersion="1.3.3"/>
<body>
 <div id="framecontent">
   <form onsubmit="return validateContent()" method="post" action="/
WebApp/frames/news/add.html?news=287" id="reactionform">
   <h1>Article</h1>
     <div class="article">
       <p>Suspendisse euismod. Cras rhoncus fringilla purus. <a
href="#">Show window</a> Aenean eleifend massa sed dui. Donec
adipiscing, justo luctus ornare consequat, lectus eros congue est, ut
gravida est quam eget leo. Curabitur ultricies diam adipiscing arcu.
Vestibulum in felis ac diam condimentum placerat. Donec nec mi
pulvinar magna dignissim ultricies. Nam tempus varius lectus. Proin
sit amet massa vitae ante accumsan lobortis. Nam venenatis ligula ut
pede faucibus elementum. Aenean viverra rutrum eros. Pellentesque vel
odio a odio ultrices pretium. Vivamus placerat. Maecenas at massa nec
diam congue tincidunt. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.</p>
     <div class="react">
       <span class="header"> Réaction de Demo User le 13-03-09 a
13h25:</span>
       <p><textarea style="margin: auto; width: 90%;"
id="reactcontent"/></p>
     </div>
   </div>
   <input type="reset" value="Annuler" class="reset input button"/>
   <input type="submit" value="Enregistrer" class="submit btn save
input button"/>
 </form>
 </div><!-- End of content -->
 <div id="_container" style="display: none;"/>
</body>
</html>

Merci

**Erwan31** · 16/03/2009, 14h04

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<iframe src="/WebApp/frames/news/add.html?news=287" class="ui-dialog-
content ui-widget-content" style="height: 413px; min-height: 91px;
width: 337px;"/>

> width: 100%

[JQuery] Dialog avec IFrame. 50% de l'espsce

CSS

Vue hybride

Discussions similaires

Partager

Partager