PDA

View Full Version : Unable to make toolbar transparent Toolbar in IE


myExtJsUname
21 Nov 2012, 2:03 PM
Hello all,

I am unable to make a toolbar in my application transparent in IE. It works in FF...as you can see here:

40233

The code for the very cut down example you see above of what I am trying to do in my app is included here:

<html>
<head>
<title>Transparent Toolbar</title>

<link rel="stylesheet" type="text/css" href="/EMAF/ext-4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="/EMAF/ext-4.1.1/ext-all-debug.js"></script>

<script type="text/javascript">
Ext.application(
{
name: "TransparentToolbar"
,launch: function(){
var toolbar = Ext.create(
"Ext.toolbar.Toolbar"
,{
height: "50px"
,region: "north"
,style: {
"background": "transparent"
}
}
);

var panel = Ext.create(
"Ext.panel.Panel"
,{
region: "center"
}
);

var container = Ext.create(
"Ext.container.Container"
,{
renderTo: Ext.Element.get('extjsApp')
,layout: "border"
,height: "100%"
,items:[
toolbar
,panel
]
,style: {
"background": "transparent"
}
}
);
}
}
);
</script>
</head>
<body>
<div id="extjsApp"></div>
</body>
</html>


I found a thread that talks about the Toolbar not accepting styling in IE (http://www.sencha.com/forum/showthread.php?193519-Styling-of-Ext.toolbar.Toolbar-fails-in-Internet-Explorer), but I don't think it applies to my problem as I am not trying to apply my own CSS. And, besides, that "bug" was closed as un-reproduceable.

To be honest, I can't even get it to display properly by setting attributes directly in IE's Developer Tools.

Can anyone see what I'm missing in my configuration that would cause IE to ignore the transparency requested? It seems like it should be so simple...

Cheers,
jtm
mitchellsimoens
23 Nov 2012, 7:31 AM
What IE version are you using?
myExtJsUname
23 Nov 2012, 8:31 AM
I have tried with IE7 and IE9 (with compatibility on and off) in two different environments (XP and Windows 7).

Please don't tell me you can't reproduce it. I hate it when that happens...!

Cheers,
jtm
myExtJsUname
17 Dec 2012, 11:43 AM
There's an update to this thread with a solution below but I can't change the Best Answer pointer to remove this one...


Okay, well, just to close this one off...

Since we never figured out what the problem was or how to address it, we have simply decided not to make the toolbar transparent. It now appears consistently in FF and IE...in blue.

Cheers,
jtm
myExtJsUname
6 Mar 2013, 1:55 PM
Update...just in case someone comes across this and it helps.

We finally got the white background to work in IE and FF by using a style that pointed to a 1x1 pixel GIF that was just blank white. For example:



Ext.create(
"Ext.toolbar.Toolbar"
,{
id: "Core_Toolbar"
:
}
);


With the following CSS:


#Core_Toolbar {
background:transparent url('/images/white.gif') repeat 0 0 !important;
}