mzbirka
21 Feb 2007, 5:49 AM
Button, which was added to the BasicDialog as first, is displayed in wrong position in IE6. In FF2, Opera9 it works. Colapsing and expanding the dialog helps, hovering over the wrongly positioned button helps too if it is visible (it depends on IE's rendering mode).
Why it is not visible on the examples? The shadow:true makes the difference. But then again, if shadow is true, buttons are ok, but when the dialog is collapsed, shadow is still visible.
Below is somewhat minimal example. Can someone confirm this behavior? In 0.33 everything worked ok. Big thanks to all, especially to Jack.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>first-added button in basicdialog without a shadow IE6 bug?</title>
<script src="ext-1.0-alpha1/yui-utilities.js" type="text/javascript"></script>
<script src="ext-1.0-alpha1/ext-all.js" type="text/javascript"></script>
<script src="ext-1.0-alpha1/ext-bridge-yui.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ext-1.0-alpha1/resources/css/ext-all.css">
<script type="text/javascript">
var Login = function(){
var dialog;
return {
init : function(){
dialog = new Ext.BasicDialog("demo-dlg", {
width: 400,
height: 200
});
//this button will be positioned and probably hidden under the titlebar of the dialog
//whether hidden or not depends on ie6 mode, but always in wrong position
dialog.addButton('button1');
//this button will be visible at correct place
dialog.addButton('button2');
dialog.show();
//"button1" will be ok on first mouse hover, or after this:
//dialog.collapse();
//dialog.expand();
}
};
}();
Ext.onReady(Login.init, Login, true);
</script>
</head>
<body>
<div style="visibility:hidden;position:absolute;top:0px;" id="demo-dlg">
<div class="x-dlg-hd">Dialog title</div>
<div class="x-dlg-bd">
<div class="x-dlg-tab" title="Login">
<div class="inner-tab">
</div>
</div>
</div>
</div>
</body>
</html>
Why it is not visible on the examples? The shadow:true makes the difference. But then again, if shadow is true, buttons are ok, but when the dialog is collapsed, shadow is still visible.
Below is somewhat minimal example. Can someone confirm this behavior? In 0.33 everything worked ok. Big thanks to all, especially to Jack.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>first-added button in basicdialog without a shadow IE6 bug?</title>
<script src="ext-1.0-alpha1/yui-utilities.js" type="text/javascript"></script>
<script src="ext-1.0-alpha1/ext-all.js" type="text/javascript"></script>
<script src="ext-1.0-alpha1/ext-bridge-yui.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ext-1.0-alpha1/resources/css/ext-all.css">
<script type="text/javascript">
var Login = function(){
var dialog;
return {
init : function(){
dialog = new Ext.BasicDialog("demo-dlg", {
width: 400,
height: 200
});
//this button will be positioned and probably hidden under the titlebar of the dialog
//whether hidden or not depends on ie6 mode, but always in wrong position
dialog.addButton('button1');
//this button will be visible at correct place
dialog.addButton('button2');
dialog.show();
//"button1" will be ok on first mouse hover, or after this:
//dialog.collapse();
//dialog.expand();
}
};
}();
Ext.onReady(Login.init, Login, true);
</script>
</head>
<body>
<div style="visibility:hidden;position:absolute;top:0px;" id="demo-dlg">
<div class="x-dlg-hd">Dialog title</div>
<div class="x-dlg-bd">
<div class="x-dlg-tab" title="Login">
<div class="inner-tab">
</div>
</div>
</div>
</div>
</body>
</html>