Styling of Ext.toolbar.Toolbar fails in Internet Explorer

**malstroem** · 5 Apr 2012 7:55 AM

Ext version tested:

Ext 4.1.0 RC2

Browser versions tested against:

FF11 (firebug 1.9.1 installed) - normal behavior
Chrome 18.0.1025.142 m - normal behavior
IE7 - broken
IE8 - broken
IE9 - broken

DOCTYPE tested against:

<!DOCTYPE HTML>

Description:

Styling of Ext.toolbar.Toolbar fails in Internet Explorer.
Change of "modes" with IE DevTools did not change the problem.

Steps to reproduce the problem:

Create an Ext.toolbar.Toolbar
Try to style the toolbar with css (e.b. background-image and/or color)

The result that was expected:

styled toolbar

The result that occurs instead:

standard gray toolbar.

Test Case:

PHP Code:


Ext.onReady(function(){
         Ext.create('Ext.container.Viewport',{
               items:[{
                   xtype:'toolbar',
                   cls:'HeaderToolbar',
                   height:32,
                   style:'padding:4px;',
                   items:[{
                        xtype:'tbtext',
                        text:'Text'
                       }]
                },{
                    xtype:'panel',
                    style:'padding:10px;',
                    html:'Panel Content',
                    border:false    
                }]
       }).show();
});

The additional css (beside ext-all.css)

Code:

.HeaderToolbar{
    background:#F0F0F0 url(../Ico/TopPanel.png) repeat-x top left !important;
    border:0px;
    vertical-align:middle;
    color:#ffffff;
    overflow:hidden;
    height:32px;
}

.HeaderToolbar .xtb-text, 
.HeaderToolbar .x-btn-inner, 
.HeaderToolbar .x-toolbar-text {
    color:#ffffff !important;
    font-weight: bold;
    font-size: 12px;
}

The "TopPanel.png" ist just a simple recantgular blue Icon with some gradient.
TopPanel.png

This is the result in FF vs. IE

ff.jpg

ie.jpg

**malstroem** · 6 Apr 2012 11:41 PM

I just tried with cls:'header-toolbar' ... same problem
So it cannot be the camelCased CSS class-name

**Animal** · 7 Apr 2012 12:18 AM

Have you tried with a JPG instead of a PNG?

**malstroem** · 8 Apr 2012 7:04 AM

Thks Aninmal for your reply - but that did not change the issue.
Same problem with jpg-icon... even a simple backround color (without image at all) is not beeing shown in IE. I conclude, that the toolbar-styling must be changed by the Ext JS code somewhat later in layouting process...?!

See here my complete(!) css declaration (no more extra css used in testcase):

Code:

<link type="text/css" rel="stylesheet" href="ExtJS/resources/css/ext-all-gray.css" />

<style type="text/css">
.header-toolbar{
    background:#000066 ;
    border:0px;
    vertical-align:middle;
    color:#ffffff;
    overflow:hidden;
    height:32px;
}

.header-toolbar .xtb-text, 
.header-toolbar .x-btn-inner, 
.header-toolbar .x-toolbar-text {
    color:#ffffff !important;
    font-weight: bold;
    font-size: 12px;
}
</style>

Again the results in FF vs. IE:

ff.jpg

ie.jpg

**Animal** · 8 Apr 2012 3:03 PM

Must be some IE CSS specificity bug.

**malstroem** · 9 Apr 2012 1:28 AM

Ok. Could you please classify it as bug then, to make it possible for it beeing fixed in 4.1 GA?!

This worked in Ext 3.x with all known IE versions (so it cannot be a IE bug)

Edit:
I just tried to change the style with "addCls" within an "afterlayout" or "afterrender" listener - but this did not work in IE too - again this was possible with FF/Chrome.

**malstroem** · 9 Apr 2012 2:06 AM

Just found a workaround at least...

Using the IE Dev Tools I found, that my own css declarations get overriden by some Ext declarations.
When deleting these lines - IE is styling the toolbar as desired... sideeffects not yet checked!

PHP Code:


/* line 151, ../themes/stylesheets/ext4/default/widgets/_toolbar.scss */
.x-nlg .x-toolbar-default {
  background-image: url('../../resources/themes/images/gray/toolbar/toolbar-default-bg.gif') !important;
  background-repeat: repeat-x; }

to be found on line 6670 in ext-all-gray-debug.css

**mrtedweb** · 27 Jun 2012 5:49 PM

I have ran into this exact same problem.

**mrtedweb** · 28 Jun 2012 3:07 AM

I solved this by overwriting the .x-nlg .x-toolbar-default tag in my own css file using a transparent png image instead:

Code:

.x-nlg .x-toolbar-default {
    background-image: url(../images/blank.png) !important;
}

So far it seems to work fine, especially since custom styles are being used throughout my whole project. Plus, ExtJS remains intact.

Styling of Ext.toolbar.Toolbar fails in Internet Explorer

Thread Tools

Search Thread

Display

Styling of Ext.toolbar.Toolbar fails in Internet Explorer

Styling of Ext.toolbar.Toolbar fails in Internet Explorer