Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Possible bug: IE6 - BasicDialog shadow and addButton problem

  1. #1

    Default Possible bug: IE6 - BasicDialog shadow and addButton problem

    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.

    Code:
    <!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>

  2. #2
    Ext JS Premium Member simeon's Avatar
    Join Date
    Mar 2007
    Location
    Austin, Texas
    Posts
    227

    Default

    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

  3. #3
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    I am looking at it right now. I will let you know what I find.

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    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.

  5. #5

    Default Except for the shadow it is working now

    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....log/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...

  6. #6
    Ext JS Premium Member simeon's Avatar
    Join Date
    Mar 2007
    Location
    Austin, Texas
    Posts
    227

    Default

    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.

    Code:
      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

  7. #7
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    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...

  8. #8
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    If it's not one browser it's another. I popped up another zip.

  9. #9

    Default Ok now

    Seems good now, big thanks!

  10. #10
    Ext JS Premium Member simeon's Avatar
    Join Date
    Mar 2007
    Location
    Austin, Texas
    Posts
    227

    Default

    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:
    Code:
    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

Page 1 of 2 12 LastLast

Similar Threads

  1. [Ext.BasicDialog].destroy(true) doesn't destroy shadow
    By diegovilar in forum Ext 1.x: Bugs
    Replies: 1
    Last Post: 25 Mar 2007, 12:42 PM
  2. Shadow- how?
    By lastid in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 11 Mar 2007, 4:22 AM
  3. Config Toolbar.addButton
    By Domitian in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 25 Feb 2007, 3:30 AM
  4. Adding a userparam to callback in addButton?
    By Wolfgang in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 21 Jan 2007, 1:07 PM
  5. toolbar addButton
    By mimiz in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 15 Jan 2007, 9:50 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •