iFrame jQuery dans le dialogue de l'INTERFACE utilisateur provoque la barre de défilement horizontale sur parent
Je suis à l'aide de l'INTERFACE utilisateur de jQuery boîte de dialogue pour présenter le contenu dans une nouvelle iFrame. Tout fonctionne très bien sauf que la fenêtre parent de la boîte de dialogue est l'obtention d'une barre de défilement horizontale, tandis que la boîte de dialogue est affichée (IE8). J'ai traqué le problème de la <html> élément à l'intérieur de l'iFrame être interprétées dans un sens très large par le navigateur, même si le seul contenu de la page dans l'iFrame dans un 580px div.
J'ai essayé d'ajouter du CSS à HTML et les balises de CORPS à l'intérieur de l'iFrame (par exemple, largeur: 98% ou width: 600px;)... et aucun ne semble avoir aucun impact.
Le code pour ouvrir la boîte de dialogue ci-dessous. Des suggestions?
$("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);
});
Mise à JOUR: découvrez ces démos où j'ai eu le code pour voir de quoi je parle (IE8): http://elijahmanor.com/demos/jqueryuidialogiframe/index.html
- pouvez-vous poster un lien de démonstration?
- Je ne peux pas poster une démo en raison d'un NDA qui est en place. Si il n'y a plus d'informations/code qui pourrait être utile, faites le moi savoir et je vais poster autant que je le peux.
- un printscreen peut-être? juste pour être sûr que je comprends bien?
Vous devez vous connecter pour publier un commentaire.
Ce qui semble être un petit bug dans l'INTERFACE utilisateur de jQuery 1.7.2 et il n'y a actuellement un billet open (#3623) sur la question. Deux solutions sont proposées dans le billet commentaires:
Une Solution
Modifier jquery-ui-1.7.2.la coutume.css:
.ui-widget-overlay
.position:fixed;
.Solution B
Modifier jquery-ui-1.7.2.custom.min.js:
addClass("ui-widget-overlay").css({width:this.width(),height:this.height()});
sur la ligne 97..css({width:this.width(),height:this.height()})
.Ma première pensée a été
overflow-x : hidden
et dans mon cas, dans IE8 en mode standard, ainsi que le mode quirks il fait le truc, barre horizontale disparait. Tous vous avez besoin à faire est de le mettre sur la balise body.overflow:hidden
?Affichage de l'url pour une démonstration en ligne de la problématique de l'aide.
J'ai eu le même problème.
Dans mon cas, le dialogue est un enfant de corps et j'ai utilisé le script suivant pour empêcher le débordement: