Results 1 to 3 of 3

Thread: Opacity and Panel-Heads

  1. #1
    Sencha Premium User
    Join Date
    Nov 2012
    Location
    Austria
    Posts
    55
    Answers
    1

    Question Answered: Opacity and Panel-Heads

    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:

    Code:
    background-color:#000; opacity:0.6;
    


    And here is, how overlay the Container over my "app":
    Code:
    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.
    Lightbox_bug.png


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

    Best regards,
    Sebastian



  2. 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/

  3. #2
    Ext JS Premium Member
    Join Date
    Jul 2011
    Location
    Hyderabad, India
    Posts
    99
    Answers
    15

    Default

    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/

  4. #3
    Sencha Premium User
    Join Date
    Nov 2012
    Location
    Austria
    Posts
    55
    Answers
    1

    Default

    Thanks for the quick reply,

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

    Best regards,
    Sebastian

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •