1. #1
    Sencha User
    Join Date
    Sep 2009
    Posts
    13
    Vote Rating
    0
    NateWorcester is on a distinguished road

      0  

    Default Button Style Alert Issue

    Button Style Alert Issue


    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>

  2. #2
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    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()
                });

  3. #3
    Sencha User
    Join Date
    Sep 2009
    Posts
    13
    Vote Rating
    0
    NateWorcester is on a distinguished road

      0  

    Default


    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
    Attached Images

  4. #4
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    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;
                }

Thread Participants: 1