Button Style Alert Issue

**NateWorcester** · 5 Oct 2009 9:08 AM

Hello Ext Community,

I've been styling Ext to match our current application and it's going well so far. Our style is very simple compared to Ext and doesn't use a lot of images or gradients. I recently styled the Window component so we can use alerts and confirm dialogs and I noticed a strange problem with my button styles in IE7/IE8.

It seems that if I use MessageBox.alert after a call to MessabeBox.confirm, my button styles don't render correctly on any subsequent calls to MessageBox functions. Specifically, the button background color and borders are gone. If you drag the alert, the buttons hide and when they reappear they are styled correctly.

Here is a test case with a stripped down version of my styles. Note that I have to use that doctype since the rest of our application does. It works fine in strict mode.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="lib/ext-3.0.0/resources/css/ext-all.css" />
        <script type="text/javascript" src="lib/ext-3.0.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="lib/ext-3.0.0/ext-all-debug.js"></script>
        
        <style>
                    
            .x-toolbar-cell .x-btn-tl,.x-toolbar-cell .x-btn-tr,.x-toolbar-cell .x-btn-tc,
            .x-toolbar-cell .x-btn-ml,.x-toolbar-cell .x-btn-mr,.x-toolbar-cell .x-btn-mc,
            .x-toolbar-cell .x-btn-bl,.x-toolbar-cell .x-btn-br,.x-toolbar-cell .x-btn-bc {
                background-image: none;
            }
            
            .x-toolbar-cell .x-btn {
                border-top: 1px solid #6f8cc0;
                border-left: 1px solid #6f8cc0;
                border-right: 1px solid #222b3b;
                border-bottom: 1px solid #222b3b;
                background-color: #4d6185;
            }
            
        </style>
        
            
    </head>
    <body>
        <script>
            Ext.onReady(function(){
                var b = new Ext.Button({
                    text: 'not broken'
                    ,handler: function(){
                        Ext.MessageBox.confirm('Confirm', 'Are you sure you want to?',Ext.emptyFn);
                        
                    }
                    ,renderTo: Ext.getBody()
                });
                                
                b = new Ext.Button({
                    text: 'broken'
                    ,handler: function(){
                        Ext.MessageBox.confirm('Confirm', 'Are you sure you want to?', function(){
                            Ext.MessageBox.alert('Alert', 'alerted');
                        });
                    }
                    ,renderTo: Ext.getBody()
                });
                    
            });
        </script>
    </body>
</html>

**zhegwood** · 5 Oct 2009 10:39 AM

I've found the easiest thing to do in this case is not worry about the container and just give the button its own class:

Code:

        <style>
                    
            .confirm-button .x-btn-tl,.confirm-button .x-btn-tr,.confirm-button .x-btn-tc,
            .confirm-button .x-btn-ml,.confirm-button .x-btn-mr,.confirm-button .x-btn-mc,
            .confirm-button .x-btn-bl,.confirm-button .x-btn-br,.confirm-button .x-btn-bc {
                background-image: none;
            }
            
            .confirm-button .x-btn {
                border-top: 1px solid #6f8cc0;
                border-left: 1px solid #6f8cc0;
                border-right: 1px solid #222b3b;
                border-bottom: 1px solid #222b3b;
                background-color: #4d6185;
            }
            
        </style>


            b = new Ext.Button({
                text: 'broken'
                ,cls: 'confirm-button'
                ,handler: function(){
                    Ext.MessageBox.confirm('Confirm', 'Are you sure you want to?', function(){
                        Ext.MessageBox.alert('Alert', 'alerted');
                    });
                }
                ,renderTo: Ext.getBody()
            });

**NateWorcester** · 5 Oct 2009 11:18 AM

Thanks zhegwood but I'm more worried about the buttons on the alert when it pops up. I should have been more clear and I meant to attach this screen shot. It should show what i mean more clearly. Notice how the button on the alert that pops up after the confirmation doesnt have the borders/background color

**zhegwood** · 5 Oct 2009 1:23 PM

I got it to work like this, but if I were you I'd stick a transitional DTD in there and see if it messes up anything else in the app. You can see a list of valid DTDs here.

Code:

            .x-toolbar-cell .x-btn-tl,.x-toolbar-cell .x-btn-tr,.x-toolbar-cell .x-btn-tc,
            .x-toolbar-cell .x-btn-ml,.x-toolbar-cell .x-btn-mr,.x-toolbar-cell .x-btn-mc,
            .x-toolbar-cell .x-btn-bl,.x-toolbar-cell .x-btn-br,.x-toolbar-cell .x-btn-bc {
                background: none;
                background-color: #4d6185;
            }
            
            .x-toolbar-cell .x-btn {
                border-top: 1px solid #6f8cc0;
                border-left: 1px solid #6f8cc0;
                border-right: 1px solid #222b3b;
                border-bottom: 1px solid #222b3b;
            }

Button Style Alert Issue

Thread Tools

Search Thread

Display

Button Style Alert Issue

Button Style Alert Issue