PDA

View Full Version : Opacity and Panel-Heads



SebastianZ
6 Jun 2014, 3:13 AM
Hi,

i got a little problem and i hope you guys can help me:

I've created a small Sencha - App (just a site with a dummy-grid) and now i want to overlay it with a semitransparent panel.

I've added a new Container into my app. Up to the style-config it is empty.
The style is set like:


background-color:#000; opacity:0.6;


And here is, how overlay the Container over my "app":

var lb = Ext.create(myApp.view.Lightbox, {renderTo:Ext.getBody()});
var lbd = Ext.getDom(lb.id);


lbd.style.position = 'absolute';
lbd.style.width = '100%';
lbd.style.height = '100%';
lbd.style.top = '0';




Now it looks like, the grid-header is in front of the overlay.
49253


Is there workaround, so that the header looks like behind the overlay?

Best regards,
Sebastian

mdnaveed42
9 Jun 2014, 4:18 AM
Hi,

Add "z-index" (CSS property) to it.

Your overlay should have z-index higher than the header. This should help you :)


Thanks,
Md Naveed
\m/

SebastianZ
9 Jun 2014, 10:23 PM
Thanks for the quick reply,

"z-index" was exactly what i'm looking for.

Best regards,
Sebastian