The JQuery UI CSS Mess

  • George Sexton

    (@gsexton)


    7 years, 11 months ago

    I’m running into kind of a consistent, recurring problem with my plugin and other plugins including JQuery UI.

    My plugin displays dialogs, so I enqueue the appropriate javascript and wp-dialog CSS files.

    However other plugins are including their own copy of JQuery-UI.css which causes the dialog to display incorrectly. You can see and example here:

    http://wickfordcatholic.com/anniversaries/

    click on one of the anniversary names. Here’s another thread where I worked with another plugin vendor:


    https://wordpress.org/support/topic/breaks-dialogs-includes-jquery-ui?replies=3

    I understand why people are doing this. I tried to use the JQuery UI Datepicker, and was stymied because WP doesn’t include the required CSS to make it work. That was super-frustrating because WP explictly names out the jquery-ui-datepicker as a script to be loaded.

    I tried loading my own copy of JQuery UI.css from a CDN and I ran into the same problem.

    I understand the issue with including a JQuery-UI theme because it might not match the WP theme at all, making people really unhappy.

    Is this kind of problem solvable? I’m more of a back-end developer. Could a system be created to dynamically generate a complete JQuery-UI css file using hints provided by the theme? That way a themed, functionally complete JQuery UI CSS file could be delivered?

Viewing 1 replies (of 1 total)
  • TrishaM

    (@trisham)

    7 years, 11 months ago

    CSS is always tricky because it depends on the order that all the css styles are loaded, and as you’ve experienced, many developers create their own without any thought to whether their preferred styles may be overwriting the preferred styles of the site owner.

    SO the first thing I would do in this case is see in what order your CSS is being loaded by viewing the source, and try to move my preferred CSS to the *last* one loaded – sometimes this works, sometimes it doesn’t. When it doesn’t, I find the specific styles I need and add !important to them before closing with the semicolon. It’s far from ideal, but it works.

    Occasionally I have to *force* this by manually adding my own CSS stylesheet link *after* the wp_head(); in the header.php file….again this is not ideal but sometimes the only way to fix style problems.

    If the CSS is being loaded by the jQuery script itself, try moving the script to the footer – most often the jQuery components dont’ need to be available until the page loads anyway, so putting the script in the footer assures (usually) that your CSS will get loaded after any others.

Viewing 1 replies (of 1 total)
  • The topic ‘The JQuery UI CSS Mess’ is closed to new replies.