Results 1 to 6 of 6

Thread: Toolbar disappears on slideIn in IE

  1. #1

    Question Toolbar disappears on slideIn in IE

    I'm having an issue where a toolbar disappears from the screen after completing a slideIn(). This only happens in IE(7). (I don't have previous versions of IE to test.) Firefox is OK. Here's the sample code I'm using to diagnose the problem:

    Code:
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
        
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all-debug.js"></script>
        
        <script type="text/javascript">
        Ext.onReady(function() {
            // create toolbar
            toolbar = new Ext.Toolbar("toolbarContainer");
            toolbar.addText('foo');
            
            // create buttons to trigger bug
            var slideOutBtn = new Ext.Button("buttonsContainer", {
                text: 'Slide out',
                handler: function() {
                    toolbar.getEl().slideOut();
                }
            });
            var slideInBtn = new Ext.Button("buttonsContainer", {
                text: 'Slide in',
                handler: function() {
                    toolbar.getEl().slideIn();
                }
            });
        });
        </script>
    </head>
    
    <body>
        <div id="toolbarContainer"></div>
        <div id="buttonsContainer"></div>
    </body>
    </html>
    When I click "Slide in", the toolbar slides in nicely, and then promptly vanishes. Any idea what's going on?

  2. #2

    Thumbs up Fixed

    I finally figured it out, thanks to http://wiki.script.aculo.us/scriptac...Effect.SlideUp. Add the following after creating the toolbar:

    Code:
    toolbar.getEl().dom.style.height = toolbar.getEl().getHeight();
    Tada! The full example now looks like:

    Code:
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
        
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all-debug.js"></script>
        
        <script type="text/javascript">
        Ext.onReady(function() {
            // create toolbar
            toolbar = new Ext.Toolbar("toolbarContainer");
            toolbar.addText('foo');
            
            // fix for IE
            toolbar.getEl().dom.style.height = toolbar.getEl().getHeight();
            
            // create buttons to trigger bug
            var slideOutBtn = new Ext.Button("buttonsContainer", {
                text: 'Slide out',
                handler: function() {
                    toolbar.getEl().slideOut();
                }
            });
            var slideInBtn = new Ext.Button("buttonsContainer", {
                text: 'Slide in',
                handler: function() {
                    toolbar.getEl().slideIn();
                }
            });
        });
        </script>
    </head>
    
    <body>
        <div id="toolbarContainer"></div>
        <div id="buttonsContainer"></div>
    </body>
    </html>

  3. #3

    Default THANKS.

    It worked for me.
    Thank You.

  4. #4
    Sencha User sb32's Avatar
    Join Date
    Sep 2007
    Posts
    66

    Default

    Worked here as well. Thanks

    PHP Code:
    el.hide().update('<div id="testing"><p class="style-with-height">abc</p></div>')
    el.slideIn('l', {
        
    stopFxtrue,
        
    duration.5
    });
    Ext.get('testing').dom.style.height Ext.get('testing').getHeight(); 

  5. #5
    Ext User dayext's Avatar
    Join Date
    Jul 2008
    Location
    Basel, Switzerland
    Posts
    46

    Post Using Ext.Element.setHeight

    I noticed the same problem on IE 6 and IE 7, also in general slideIn cases, not necessarily with a Ext.Toolbar involved. Sometimes setting dom.style.height does not work, since the height calculation might be wrong and you end up with an element that gets larger and larger.

    A better solution is to use Ext.Element.setHeight. But it is important that the height value changes, otherwise Ext will skip the actual update to style.height. The trick seems to be that updating style.height will trigger some relayouting of the browser.

    Code:
    updateHeight: function(el) {
        var h = el.getHeight();
        el.setHeight(h + 1);
        el.setHeight(h);
    }
    -- Alex
    Day Ext Developers

  6. #6
    Sencha User
    Join Date
    Feb 2010
    Posts
    8

    Exclamation Same for me

    I had an extremely similar problem with crazily-vanishing buttons on a bottom toolbar in an Ext.Window, but in my case the buttons were sliding off to one side - again only on IE. Firefox and Safari were fine.

    I solved it using the principle outlined above, i.e. IE forgets the size of elements so you have to tell it again:

    var viewAgreementWindow = new Ext.Window({
    id : 'viewAgreementWindow',
    ...
    fbar : viewToolbar
    }]
    });

    var el = viewToolbar.getEl();
    el.setWidth(viewAgreementWindow.width-100);

    Hope this helps someone. It took over a day of my time.

Posting Permissions

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