5.6 jquery-ui css not working as expected

[arthurdaly]

After updating to 5.6 from 5.5.3 the CSS in jquery-ui-dialog and jquery-ui-selectmenu is no longer working in the admin area. The close button is showing text over the icon in the dialog, and the buttons are distorted. The selectmenu is no longer grey, and is completely white with no outline. Tested using Firefox 83 on MacOS 11.0.1. The page is post.php for editing Woocommerce product, but also tested on other pages with same result.

[mukesh27]

Hi there!

Welcome to the Trac.

Can you please attached the screenshot for the issues

[arthurdaly]

jquery-ui dialog 5.6

[arthurdaly]

jquery-ui-selectmenu 5.6

[arthurdaly]

jquery-ui-dialog 5.5.3

[arthurdaly]

jquery-ui-selectmenu 5.5.3

[arthurdaly]

I think I've made an error as I thought I was loading 1.12.1 CSS to match the current version in wp-includes/js/jquery/ui/dialog.js. I was still loading 1.11.4. Also Woocommerce is loading this version, and it causes a conflict. It looks like the css file wp-includes/css/jquery-ui-dialog.css is still using 1.11.4, so maybe there's a bug there. I wasn't loading this file.

By updating the CSS to 1.12.1, I was able to fix it, although there's still a small problem with the width of the selectmenu. It now changes to be wider, even though it's hard coded to be 170px. The width is correct with 1.11.4 CSS loaded, but I'm not sure what's causing this. Might be able to fix it by adding CSS scope.

[Clorith]

Hi there, and welcome to the WordPress trac.

It looks like you are using a plugin of some kind, at least from your screenshots (you mentioned seeing similar on other pages, but this is a bit hard to gauge from screenshots).

I've used a default installation of Woo to verify, and I can't seem to replicate the jQuery UI issues you are observing there, so I suspect this may be a conflict with another plugin or your theme.

It should be noted that WordPress does not ship styles for jQuery UI (with the notable exception of the file jquery-ui-dialog.css, which was manually patched before the 5.6 release to address the text issue you are describing, but any manually imported version of the file would overrule the file WordPress ships with).

The intent is for plugins or themes that rely on jQuery UI to include the styles them selves, so that it matches their expected design or visuals. Any plugins or themes doing so would need to update their styles to match the updated version of jQuery UI.

What I suspect is happening here is one of your plugins, or your theme, is requesting the old styles.

For further troubleshooting of plugin or theme conflicts, please look to the projects ​support resources, or the ​support forums.

As for now, this doesn't appear to be with WordPress it self, so I'm going to mark this as worksforme, this is one of our workflow keywords where we are unable to replicate the specific issue within WordPress it self, if something should come up at a later point to indicate this is something WordPress can, and should, address, then the ticket can be resumed though.