PDA

View Full Version : BasicDialog in IE7


jbraband
20 Feb 2007, 5:30 PM
i am using .40-alpha and am seeing a strange behavior in IE7 with a BasicDialog.

here is a simple example of the problem:



<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="../Resources/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../Resources/yui-ext/yui-ext-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../Resources/yui-ext/resources/css/examples.css" />
<link rel="stylesheet" type="text/css" href="../Resources/yui-ext/resources/css/tree.css" />
<link rel="stylesheet" type="text/css" href="../Resources/yui-ext/resources/css/yui-ext.css" />

</head>
<body>
<div id="Dialog">
<div class="ydlg-hd">Test Box</div>
<div class="ydlg-bd">
Lorem ipsum dolor sit...
</div>
</div>

<script language="javascript" type="text/javascript">
var d = new YAHOO.ext.BasicDialog("Dialog", { width:200,
height:200,
shadow:true});
d.show();

</script>
</body>
</html>


in firefox it renders fine, but in IE7, the box is pushed up in the viewable space.
http://www.jerebear.com/basic_dialog_ie7_issue.jpg

if i remove the <div id="ydlg-bd"> from the markup, it renders fine (except for no background behind the text.

anyone ever see this?
jbraband
20 Feb 2007, 5:35 PM
if it helps track down what it is....if you resize the box in IE7 to "really tall", the full dialog box is visible and if you refresh after that, it resizes to the original size of course, but it is still completely visible.

now i'm convinced that there's something wacky going on somewhere. : 8)
jbraband
12 Mar 2007, 11:31 AM
i actually put this sample page up, so that hopefully it can attract some help since its so easy to view now. :P

http://www.jerebear.com/yui/html/test.html
Animal
12 Mar 2007, 1:16 PM
At a guess, you're trying to create widgets before the markup has been rendered.

The following code requires Ext 1.0 due to using Ext.onReady. I've changed the include file names for you - you just need to make sure the paths are correct. It could be changed to use the old system, but why would you want to use that?



<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="../Resources/ext/yui-utilities.js"></script>
<script type="text/javascript" src="../Resources/ext/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../Resources/ext/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../Resources/ext/resources/css/ext-all.css" />

<script type="text/javascript">
Ext.onRead(function() {
var d = new YAHOO.ext.BasicDialog("Dialog", { width:200,
height:200,
shadow:true
});
d.show();
});
</script>
</head>
<body>
<div id="Dialog">
<div class="ydlg-hd">Test Box</div>
<div class="ydlg-bd">
Lorem ipsum dolor sit...
</div>
</div>
</body>
</html>
jbraband
12 Mar 2007, 2:04 PM
well, i have a legacy project that is nearing completion (legacy meaning november-ish) and despite begging for the time to promote Ext to 1.0....it shall stay at .40.

in the actualy app, the dialog gets built well past load time (triggered by a button) so I know that ordering and timing of loaded files isnt the issue. to be sure, I made the script tag



<script language="javascript" type="text/javascript">
YAHOO.ext.EventManager.onDocumentReady(
function () {
var d = new YAHOO.ext.BasicDialog("Dialog", { width:200,
height:200,
shadow:false,
resizable: false,
closable: false});
d.show();
}, this, false);
</script>


to ensure that all external assets are available in this simplified sample file. I appreciate the reply Animal.

another investigative point is to change the dialog to resizable. load it in IE and then click and drag the bottom resizer to a "really tall" position. sometimes the dialog snaps into place when you drop the resizer. at this point if you refresh the page, the dialog renders in the correct position above the shadow.

i'm using Ext 1.0 for a project I'm just starting now....and this is not an issue in 1.0 as far as i can tell. i tried digging arou in the resizing code of BasicDialog (which gets called on the drop of the resizer, but to no avail.

i appreciate the efforts

-j
jbraband
12 Mar 2007, 2:33 PM
well, i just dugg through the BasicDialog code (.40) and the culprit is the focusEl object. in the focus method...if I comment out the this.focusEl.focus() line, all is good in IE. time to see what has changed in Ext 1.0

-j
jbraband
12 Mar 2007, 2:57 PM
well, my final solution for this release is to just derive BasicDialog and instantiate that new class. the new class, IEDialogFix, overrides the focus method and removes that call to this.focusEl.focus()



YAHOO.ext.IEDialogFix = function(el, config){
YAHOO.ext.IEDialogFix.superclass.constructor.call(this, el, config);
};
YAHOO.extendX(YAHOO.ext.IEDialogFix, YAHOO.ext.BasicDialog, {
focus : function () {
if(this.defaultButton){
this.defaultButton.focus();
}else{
//this.focusEl.focus();
}
}
});



this is by no means a "good" or "correct" solution, but I'm not intending on focusing the box with the keyboard and thats about all this seems to be for.

-j
Animal
13 Mar 2007, 12:01 AM
Why not just override the erroneous function in place?



YAHOO.override(YAHOO.ext.BasicDialog, {
focus : function () {
if(this.defaultButton){
this.defaultButton.focus();
}else{
//this.focusEl.focus();
}
}
});


Then continue to use BasicDialog until you upgrade to Ext 1.0?
jbraband
13 Mar 2007, 6:16 AM
because i didnt know about YAHOO.override :D
thanks animal