-4

I'm have the following problem. It happens only on some computers (usually Mac, both Safari an Chrome, don't know the versions).

When I'm going to change the block type (paragraph, header, etc) on the editor dropdown, the list is positioned behind the editor. Here is one picture:

enter image description here

closed as off-topic by fuxia Jun 8 '18 at 23:01

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • 2
    This is a case of wrong z-index applied to context dropdown. If you are on a latest version of visual-composer and still this is an issue then it can be overzealous theme or plugin adding styling to visual-editor which is propogated when in Composer. You can try inspecting the element and see how it's z-index is computed against visual-editor's. By going backwards from it you would be able to pinpoint which plugin/theme is causing these extra CSS rules which override default behaviour. – Dhaval Shah May 29 '18 at 7:21
  • Check my answer. – coolpasta Jun 3 '18 at 2:23
1

Try to disable all plugins except WPBakery Page Builder and then enable back the plugins one at a time, until the problem is gone. If that doesn't solve the problem, then maybe the WPBakery Page Builder is in conflict with the active theme on your site.

You should also check out:

https://support.wpbakery.com/

https://kb.wpbakery.com/

0

Inspect the said dropdown.

Set, with Dev Tools, its z-index to 99999. If it works, then it means that's the issue and some freaky code got in.

Simply go to either VC's custom CSS or style.css and add:

.dropdown-selector {
    z-index: 99999;
}

If this doesn't work, then it's absolutely something deeper, contact WPBakery.

Edit:

Okay, this is what you need to do:

Either go into styles.css at the very end and add this -

.mce-menu.mce-in.mce-animate {
    z-index: 99999999 !important;
}

Or in the Page Builder's "Custom CSS" section.

Understand that this is a hack and you really need to investigate more as to why it happens. For me, it's not happening. Definitely you have some custom code over-writing it.

Here' my guess. You're playing with at LEAST one class from these:

vc_ui-panel-content vc_properties-list vc_edit_form_elements 

or

vc_ui-font-open-sans vc_ui-panel-window vc_media-xs vc_ui-panel vc_media-sm ui-draggable vc_active ui-resizable

Which are all parents of that dropdown for the heading style, try to see what's up with these.

The main window has these properties:

.vc_ui-panel.vc_ui-panel-window {
    width: 650px;
    position: fixed;
    z-index: 50000;
    top: 74px;
    left: 50%;
}

If your .mce-menu.mce-in.mce-animate has a z-index lower than 50000, then that bug will appear.

Look:

Bug Occuring

Not the answer you're looking for? Browse other questions tagged or ask your own question.