Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm using jQuery UI for a few custom controls on the page edit screen and I've noticed that the styling of the jQuery UI dialogs are conflicting with the TinyMCE dialog. Specifically the buttons and title area look especially bad. I've looked through the jQuery UI css to see what could be removed to avoid any conflicts and they're spread pretty much throughout the whole stylesheet. Is there a way to run both together without conflicting?

share|improve this question
    
How are you adding the jQuery UI, could you post the code for us to examine? –  Jeremy Jared Nov 22 '11 at 23:36
add comment

2 Answers 2

up vote 0 down vote accepted

Turns out what I had to do was use the CSS Scope option in the jQuery UI download application. I was using the normal wp_register_style/wp_enqueue_style to put it in place and it would always conflict with the jQuery UI dialog styling that the Wordpress install of TinyMCE uses. After switching to using a scoped version of the jQuery UI styles everything worked fine.

share|improve this answer
add comment

It should work just fine if you enqueue your script & stylesheet within functions.php file.

This is how I do that (feel free to copy & paste, it should work out of the box):

function load_my_admin_js() {
   wp_register_script('jquery-ui',"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js");
   wp_enqueue_script('jquery-ui');   
} 

add_action('admin_init', 'load_my_admin_js');   

function load_my_admin_css() {
   wp_enqueue_style( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css');  
} 

add_action( 'admin_print_styles', 'load_my_admin_css');  

Don't forget to delete your previous links to jQuery UI.

If something is still wrong, then your custom JS code is corrupted and affects other elements. Can't say anything more without investigating the code itself.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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