1. #1
    Sencha User ChrisR's Avatar
    Join Date
    Apr 2007
    Location
    Belgium
    Posts
    83
    Vote Rating
    0
    ChrisR is on a distinguished road

      0  

    Default [2.x][FIXED] Disabled elements alpha problem in FF3

    [2.x][FIXED] Disabled elements alpha problem in FF3


    I have searched the forum (through forum search and google search) for FF3 and alpha, opacity, png, disabled, modal, etc ... but could not find a post related to this issue.

    Disabled panels modal overlay renders totally awkward, take a look at these screenshots

    Disabled panels on render : http://i27.tinypic.com/2iittp0.jpg
    Another disabled panel : http://i29.tinypic.com/53oets.jpg
    Standard Window element not disabled: http://i31.tinypic.com/t5iyaw.jpg
    Same Window element disabled through firebug by Ext.GetCmp('myWin').disable(): http://i31.tinypic.com/28mf06.jpg

    Anyone has an explanation or solution for this issue? The interface works perfectly and interacts as expected, only the modal overlay is totally messed up.

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by mystix View Post
    try this:
    http://extjs.com/forum/showthread.ph...931#post181931

    p.s. do check out the other posts in that FF3 thread.
    .

  3. #3
    Sencha User ChrisR's Avatar
    Join Date
    Apr 2007
    Location
    Belgium
    Posts
    83
    Vote Rating
    0
    ChrisR is on a distinguished road

      0  

    Default


    That didn't do it ... here is a stripped down version of the scripts i'm using ... In the 'inner West' toolbar are buttons to en/disable the center panel. I also added a button to show an alert to demonstrate that the modal works fine, just disabled panels turn solid white here.

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <
    html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    title>Opacity Bug</title>
    <
    link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

    <
    script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>

    <script type="">
    Ext.onReady(function(){

        var vp = new Ext.Viewport({
            id: 'myLayout',
            layout: 'border', 
            items: [{
                title: 'North',
                region: 'north',
                html: 'North',
                height: 100,
                bodyClass: 'x-plain'
            },{
                title: 'West',
                region: 'west',
                html: 'West',
                width: 150
            },{
                region: 'center',
                layout: 'border',
                border: false,
                items: [{
                    title: 'Inner West',
                    region: 'west',
                    html: 'Inner West',
                    width: 200,
                    tbar: [{
                        text: 'Enable center',
                        handler: function(){
                            Ext.getCmp('innerCenter').enable();
                        }
                    },{
                        text: 'Disable center',
                        handler: function(){
                            Ext.getCmp('innerCenter').disable();
                        }
                    }]
                },{
                    title: 'Inner Center',
                    id: 'innerCenter',
                    region: 'center',
                    xtype: 'form',
                    defaultType: 'textfield',
                    bodyStyle: { padding: '5px' },
                    items: [{
                        name: 'field1',
                        fieldLabel: 'Field 1'
                    },{
                        name: 'field2',
                        fieldLabel: 'Field 2'
                    },{
                        name: 'field3',
                        fieldLabel: 'Field 3'
                    },{
                        name: 'field4',
                        fieldLabel: 'Field 4'
                    },{
                        name: 'field5',
                        fieldLabel: 'Field 5'
                    }],
                    buttonAlign: 'left',
                    buttons:[{
                        text: 'Open Alert',
                        handler: function(){
                            Ext.Msg.alert('alert', 'Alarm!');
                        }
                    }]
                },{
                    title: 'Inner South',
                    region: 'south',
                    html: 'Inner South',
                    height: 300
                }]
            }]
        });

    });
    </script>

    </head>
    <body>
    </body>
    </html> 
    Webdevelopment : Skyrocket Concepts

  4. #4
    Sencha User ChrisR's Avatar
    Join Date
    Apr 2007
    Location
    Belgium
    Posts
    83
    Vote Rating
    0
    ChrisR is on a distinguished road

      0  

    Default


    I tracked it down to the CSS background-color value of .ext-el-mask in ext-all.css

    when you override it with background-color: transparent the opacity works fine in FF3 and FF2, not tested in other browser tho
    Webdevelopment : Skyrocket Concepts

  5. #5
    Sencha User ChrisR's Avatar
    Join Date
    Apr 2007
    Location
    Belgium
    Posts
    83
    Vote Rating
    0
    ChrisR is on a distinguished road

      0  

    Default


    On the other hand, with this modification to the css rules modal masks do not longer show (they still prevent clicking tho, they just don't show since they don't have a bgcolor)
    Webdevelopment : Skyrocket Concepts

  6. #6
    Sencha User ChrisR's Avatar
    Join Date
    Apr 2007
    Location
    Belgium
    Posts
    83
    Vote Rating
    0
    ChrisR is on a distinguished road

      0  

    Default


    Anyone on the Ext team already had time to take a look at it or replicate the problem?
    Webdevelopment : Skyrocket Concepts

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    This has been fixed in SVN.

Thread Participants: 2