PDA

View Full Version : Possible bug: IE6 - BasicDialog shadow and addButton problem



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>

simeon
21 Feb 2007, 6:03 AM
I am also seeing the same behavior in IE7 but not in firefox 2.
I have several dialogs. One doesn't have the button position problem but the others do.
In the dialogs with the problem. I have an ok button and a cancel button. It's consistantly the OK button(first created) that seems to get stuck at the top of the dialog. Onmouseover it snaps into place.

Simeon

jack.slocum
21 Feb 2007, 9:01 AM
I am looking at it right now. I will let you know what I find.

jack.slocum
21 Feb 2007, 9:09 AM
I Just took you exact code and ran it with my current version and it appears to be fixed. At least I can't reproduce it. I am going to put up a new build (with button css changes) in a few minutes. Please let me know if it fixes it for you.

mzbirka
21 Feb 2007, 10:39 AM
Big thanks, with the meanwhile released package it is working.

Except for the shadow when colapsed in IE6. The shadow doesn't collapse, it is still there when it shouldn't. A minor issue - can be seen on http://www.yui-ext.com/deploy/ext-1.0-alpha1/examples/dialog/hello.html also.

EDIT: another one new: in FF2 buttons get clipped when button text is longer than some lenght, say, "Close" is ok, "Close dialog" is clipped in FF2, IE6 works ok.

PS: kudos to you for keeping track on such bugreports, can't imagine me doing the same without trac or bugreporting system of some kind...

simeon
21 Feb 2007, 11:29 AM
The latest code fixed the ok button getting stuck on the top but now there is some button clipping when there are three buttons as I used below.



dialog.addButton('Save', dialog.hide, dialog);
dialog.addButton('Activate', dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);


Activate button is geting clipped on the right side in FF2, but not in IE7.
FYI. Activate is also narrower than the other buttons for some reason.

Simeon

jack.slocum
21 Feb 2007, 11:32 AM
Geez. I just put up a new zip with a fix for shadow in IE6. Now let me see what I did to the buttons...

jack.slocum
21 Feb 2007, 12:12 PM
If it's not one browser it's another. ;) I popped up another zip.

mzbirka
21 Feb 2007, 12:26 PM
Seems good now, big thanks!

simeon
22 Feb 2007, 6:57 AM
The button clipping is gone. Thx.

I was looking through the source for the dialog.addbutton and it seems like it supports passing in a config object for the button, but when doing that my buttons just disappear.

Example:


dialog.addButton({text:'Activate',minWidth:75}, this.activateHotline, this);


On a side note, I noticed some logic that sets a minWidth of 75 px for small buttons . When the text for the button exceeds approximately the width of the word "Close" it seems to switch to a width:auto somehow.

I tried to override that behavior with the above config, but with no luck.

Is there another way to force the buttons to have a consistant minWidth?

Simeon

jack.slocum
22 Feb 2007, 4:23 PM
It's on the BasicDialog config: minButtonWidth.

mzbirka
24 Feb 2007, 4:29 AM
http://anapol.cz/yui/dialogButtonWidthIssue.gif

BasicDialog's config:


new Ext.BasicDialog('existingId', {
title: 'Náhled',
autoCreate: true,
modal:false,
autoTabs:true,
width:400,
height:380,
shadow:false,
minWidth:300,
minHeight:300,
resizable: true,
autoTabs: false,
collapsible: false,
//minButtonWidth: 100
});


As you see, the behavior is a little different from 0.33 and the main issue is, that it doesn't even respect the minButtonWidth explicitly set.

It is a minor issue but noticeable one, if it can be fixed it'll be better to do so. Thanks!

jack.slocum
24 Feb 2007, 6:22 AM
Fixed in the next Rev.

mzbirka
25 Feb 2007, 1:18 AM
It's madness :)

Fixed in IE, but in FF2 and Opera9 not, though still the latter two behave different!

Please keep it on the list, but really low priority as for me, it's a minor issue.

Thanks and don't let this put you down, please! :lol: