Hi @alx359,
Yes, I was able to replicate the issue that you have mentioned on the classic editor but I don’t think z-index needs to be 9999 and that also with !important.
The problem is happening because .wp-editor-expand #wp-content-editor-tools has z-index: 1000;. So you can easily do:
.ui-dialog {
z-index: 1001;
}
And it will work. Please update and check. Thanks for reporting it. @salvatorefresta will add it in the upcoming update.
Screenshot: https://i.imgur.com/smhXyxG.png
Yes, it works for me too with z-index: 1001. Thank you for confirming and the update.
Hi @alx359 ,
fixed on upcoming release (v 4.3.7)
Thanks!
Not sure why, but the proposed tweak after update to WP5.5.1 for Purge only current page cache isn’t working for me anymore w/o !important;.
This does:
/plugins/wp-cloudflare-page-cache/assets/css/style.css
.ui-dialog {
z-index: 1001 !important;
}
Tested page: https://domain.com/my-account
Hi @alx359,
Can you check whats the z-index value for .wp-editor-expand #wp-content-editor-tools after the update?
Hi @alx359,
Hmm… it is wired. Can you try a z-index of 1500 for .ui-dialog without any important tag?
Nope, it isn’t helping. But note the == $0 appended. Think that means the div’s html is being overwritten by js somewhere?
Hi @alx359,
Nope. It has nothing to do with JS. It’s all CSS only. I wish I can access this issue live so that I can check it.
Hmm, that will mean setting up stage where I haven’t this plugin installed yet. Need more time for doing this. BTW, just tried with z-index:9999 again, and it still doesn’t work for me. So it becomes apparent something is overwriting the z-index down the line in my configuration.
Hi @alx359,
So, you basically means !important is needed no matter what in your case.
Yes, but if you can’t reproduce let me test what plugin/theme may be overriding this in my setup and come back to you. I agree just throwing !important at an issue isn’t a good practice for interoperability, especially with ui-dialog being part of core.
Debugged the issue in localhost, and located the culprit in a ReCaptcha by BestWebSoft plugin and this piece of code of theirs:
\plugins\google-captcha\bws_menu\css\jquery-ui-styles\1.11.4\jquery-ui.css:54
.ui-front {
z-index: 100;
}
Back to this plugin, the tweak below is now effectively addressing the issue for me w/o !important:
.ui-dialog.ui-front {
z-index: 1001;
}
Hi @alx359,
So happy to hear it. 🙂
