ui-dialog z-index issue

  • Resolved alx359

    (@alx359)


    4 years, 7 months ago

    Have a z-index issue with WP5.5 and the ui-dialog success popup when clearing the cache. Here’s a screenshot.

    The fix that has worked for me is tweaking a quite large z-index value for the dialog
    \plugins\wp-cloudflare-page-cache\assets\css\style.css

    .ui-dialog {
	z-index: 9999 !important;
}
Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Contributor iSaumya

    (@isaumya)

    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

    • This reply was modified 4 years, 7 months ago by iSaumya.
    Thread Starter alx359

    (@alx359)

    Yes, it works for me too with z-index: 1001. Thank you for confirming and the update.

    Plugin Contributor Salvatore Fresta

    (@salvatorefresta)

    Hi @alx359 ,
    fixed on upcoming release (v 4.3.7)

    Thanks!

    Thread Starter alx359

    (@alx359)

    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

    Plugin Contributor iSaumya

    (@isaumya)

    Hi @alx359,
    Can you check whats the z-index value for .wp-editor-expand #wp-content-editor-tools after the update?

    Thread Starter alx359

    (@alx359)

    It still shows 1000.

    Plugin Contributor iSaumya

    (@isaumya)

    Hi @alx359,
    Hmm… it is wired. Can you try a z-index of 1500 for .ui-dialog without any important tag?

    Thread Starter alx359

    (@alx359)

    Nope, it isn’t helping. But note the == $0 appended. Think that means the div’s html is being overwritten by js somewhere?

    Plugin Contributor iSaumya

    (@isaumya)

    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.

    Thread Starter alx359

    (@alx359)

    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.

    Plugin Contributor iSaumya

    (@isaumya)

    Hi @alx359,
    So, you basically means !important is needed no matter what in your case.

    Thread Starter alx359

    (@alx359)

    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.

    Thread Starter alx359

    (@alx359)

    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;
}
    Plugin Contributor iSaumya

    (@isaumya)

    Hi @alx359,
    So happy to hear it. ??

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘ui-dialog z-index issue’ is closed to new replies.