1

I'm having an issue trying to get a Facebook feed dialogue fb.ui to display over some content on my site.

I can't seem to find a way in the documentation to increase the z-index. What's the preferred way to do this with out some css override hackery?

How do I change the z index with this? http://developers.facebook.com/docs/reference/javascript/FB.ui/

Dylan Oudyk
  • 13
  • 1
  • 4

3 Answers3

3

At the moment, there is no documented way of changing the CSS of FB.ui dialogs. FB allows the CSS to be changed for plugins like the comment-plugin, but the dialogs are controlled by FB's page and hence doesn't allow for their css to be changed.

However, if your purpose it to make sure that the dialog always pops up (essentially higher z-index), then you can try setting the "display" in the params to "popup" which will cause a new browser to be poped up instead of an overlay.

Shreeni
  • 3,222
  • 7
  • 27
  • 39
  • 3
    A little hacky but I found this jQuery snippet to do the trick $('head').append(''); – Dylan Oudyk Mar 14 '12 at 21:52
1

Actually, its customer chat box which is covering up the other divs. I did this to tackle this issue:

    .fb-customerchat.fb_invisible_flow.fb_iframe_widget 
    {
        z-index: 99998 !important;
    }
Muhammad Wajahat Anwar
  • 1,035
  • 11
  • 14
0

Facebook creates a div with the class fb_dialog for each dialog and adds them to the #fb-root element. It also sets inline styles for the fb_dialog elements, including a z-index: 10001; rule.

You can override the z-index in your CSS:
.fb_dialog {z-index: 99999 !important;}

Vlad Cazacu
  • 46
  • 1
  • 4