El cuadro de diálogo iFrame en jQuery UI causa una barra de desplazamiento horizontal en el padre
Estoy usando el diálogo de la interfaz de usuario de jQuery para presentar el contenido en un nuevo iFrame. Todo funciona muy bien, excepto que la ventana principal del cuadro de diálogo está obteniendo una barra de desplazamiento horizontal mientras se muestra el cuadro de diálogo (IE8). He rastreado el problema hasta el elemento <html> dentro del iFrame que el navegador interpreta como muy amplio, a pesar de que el único contenido de la página en el iFrame en un div de 580px.
He intentado agregar CSS a las etiquetas HTML y BODY dentro del iFrame (por ejemplo, ancho: 98% o ancho: 600px;) ... ninguno de los cuales parece tener ningún impacto.
El código para abrir el diálogo está abajo. ¿Alguna sugerencia?
$("a[providerId]").click(function(e) {
e.preventDefault();
var $this = $(this);
var $width = 600;
var $height = 400;
$('<iframe id="companyDetail" class="companyDetail" style="padding: 0px;" src="' + this.href + '" />').dialog({
title: $this.attr('title'),
autoOpen: true,
width: $width,
height: $height,
modal: true,
resizable: false,
autoResize: true,
overlay: {
opacity: 0.5,
background: "black"
}
}).width($width).height($height);
});
ACTUALIZAR: Consulte estas demostraciones donde obtuve el código para ver de qué estoy hablando (en IE8):http://elijahmanor.com/demos/jqueryuidialogiframe/index.html