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 have a custom admin page that includes both the user of wp_editor() and a jQuery dialog.

For reasons unknown to me, the instance of wp_editor() uses some of the same css class names as dialog, and one in particular (ui-widget-overlay) is messing up my jQuery dialog. I'm unable to interact with the dialog due to the z-index of the overlay as set by editor.css, and the overlay is darker, with a stripe in the middle.

Has anyone encountered this issue before? If so, how did you work around it?

function do_refreshing_invitees_dialog(){
?>  
    <script>
    $(function(){

        /**
         * The 'refresh invitees' dialog
         */
        $('#refresh-invitees-dialog').dialog({
            autoOpen: false,
            closeOnEscape: false,
            draggable: false,
            height: 140,
            modal: true,
            resizable: false,
            open: function(event, ui){ 
                /** Hide the 'x' close button */
                $(this).closest('.ui-dialog').children().children('.ui-dialog-titlebar-close').hide();
            },
        });

    });
    </script>
    <div id="refresh-invitees-dialog" title="Refreshing Event Invitess">
        <div id="dialog-spinner" style="float: left; margin: 17px 10px 0 0;">
            <img src="<?php echo $this->loader_path; ?>ajax-loader-bulk-dialog-invitees.gif" />
        </div>
        <div id="dialog-message">
            <p>Please wait while the refreshed invitee's are generated...</p>
        </div>
    </div>
<?php
}

Dialog working fine, but CSS messed up by wp_editor()

share|improve this question

1 Answer 1

up vote 1 down vote accepted

Yeah this is a fun one had to make some mods to make this one work.... add this to your theme stylesheet (style.css):

    .ui-front {
        z-index: 1001 !important;
    }
    .ui-widget-overlay {
        background: none repeat scroll 0 0 #000000 !important;
        opacity: .6 !important;
        filter: Alpha(Opacity = 60) !important;
    }

This should override the editor.css. Let me know if this does not work... Tom

share|improve this answer
    
Thanks @tnory56. I did pretty much this a couple of days back, and it did work. The only trouble of course is that it overrides the wp_editor() css. What WP needs is a way of uniquely identifying the editor for applying it's css. I've also looked down the jQuery scoping root for my dialog, but because the WP style sheet that styles the editor specifically targets .ui-widget-overlay, it still overwrites it. –  David Gard Sep 6 '13 at 8:01

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.