Comment dimensionner correctement le dialogue jQuery.ui avec un iframe

Question

Lorsque j'ouvre une boîte de dialogue jQuery avec une taille prédéfinie (800x600, par exemple), l'iframe dans la boîte de dialogue n'est pas redimensionné correctement. Il semble qu'il a la taille par défaut. En fait, la hauteur est OK, mais la largeur semble rester à 300px sans raison.

Je crée la iframe et le dialogue comme celui-ci:

someVar = '<iframe id="some-dialog" class="window-frame" src="http://example.com/"></iframe>'; 

someVar.dialog 
    ({ 
     title: command.buttonText, 
     autoOpen: false, 
     modal: false, 
     resizable: true 
    }) 
    .dialog('option', 'width', 800) 
    .dialog('option', 'height', 600); 

J'ai essayé de mettre la largeur et la hauteur dans l'appel init, le résultat est le même. Si je omets ces deux, la boîte de dialogue est initialisée avec des valeurs par défaut et le redimensionnement ultérieur fonctionne bien.

Toutes les idées aider ...

Mise à jour:

J'ai Enveloppez la iframe dans une div, puis créé la boîte de dialogue avec un appel standard:

someVar.dialog 
    ({ 
     title: command.buttonText, 
     autoOpen: false, 
     modal: false, 
     resizable: true, 
     width: 800, 
     height: 600 
    }) 

Non une réelle solution mais cela fonctionne ... (il se sent sale cependant!)

Answer 1

someVar = '<iframe id="some-dialog" class="window-frame" src="http://example.com/"></iframe>'; 

someVar.dialog({ 
    title: command.buttonText, 
    autoOpen: false, 
    modal: false, 
    resizable: true, 
    width:800, 
    height:600 
}).width(800-10).height(600-10); 

Edit: Peut-être que je ne comprends pas ce que vous entendez correctly.Anyway, plz vérifier
Demo:

Answer 2

Je l'ai résolu en ajoutant quelques styles au IFrame:

iframe#some-dialog { 
    width: 100% !important; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}