jquery dialog in Wordpress plugin admin page, buttons all appear overlapping in top right hand corner, not in the lower button pane

0
votes

I am writing a Wordpress plugin which adds some menu items to the admin view. These menu items open pages which allow me to make some settings and access data, and I am using jquery dialogs to display and edit the data. Everything works fine except, when the dialogs are opened (any of them, there are several) they always open with all the defined buttons overlapping eachother in the top right of the title pane. They do not appear in the button pane as expected.

I have tried deregistering the standard Wordpress jquery-ui-dialog and loading from a source I have used before, it makes no difference. I have tried including my own css and can successfully change the font sizes, background, dialog position etc... but nothing I have found corrects the position of the dialog buttons. (Or for that matter, the colour of the buttons... cannot change them with css for some reason?)

Have queued my own css file as below: 

add_action( 'admin_enqueue_scripts', 'queue_LD4U_admin_scripts');

function queue_LD4U_admin_scripts()
{
    wp_enqueue_script( 'jquery-ui-dialog' );
    wp_enqueue_style('kastech-LD4U-manager-admin-ui-css',
        plugins_url() . '/kastech-LD4U-manager/includes/css/ld4u_dialogs.css',
        false);
}

I can set font sizes etc. all other aspects of the dialog style... but, the buttons still all appear at the top right of the dialog, all overlapping.

All other aspects of the dialogs are working, and I have used them many times before in the front end of sites, but this is the first time tried to use in Admin of Wordpress site, and the only thing that doesnt seem to work is this, the position of the buttons. Makes it unuseable. This is my css. As I said, it correctly controls style of the dialog.

/* style for all JQuery dialogs */
.ui-dialog, .ui-dialog-content
{
    border:5px solid #1E1F22;
}
.ui-dialog-titlebar
{
    background-image: none;
    background-color: #0088BE;
}
.ui-dialog-title
{
    background-color: #ff88BE;
    color: green;
    font-size: 0.7em;
}
.ui-dialog-titlebar-close
{
    display: none;
}
.ui-dialog-buttonpane
{
    background-color: #aaaaaa;
    font-size: 0.7em;
}
.ui-dialog-buttonset .ui-button-spl1
{
    background:blue;
}
.ui-widget-overlay
{
    background-color: red;
    background-image: none;
    opacity: 0.7;
    height:3000px;
}

The other thing that I have noticed is that the enqueue-ing of the Wordpress jquery-ui-dialog does not seem to be working.. the dialogs do not appear at all unless I include 

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

somewhere in my script section.

1
jquerycsswordpressdialog
Do you have any other plugins which might add their own css? If you do, please deactivate them and see which one is the culprit. - beerwin
Also, please check the HTML code. It might have some unclosed/overlapping tags. - beerwin
Also, a little code (dialog HTML and custom css) in this question would help us greatly to solve your issue... - beerwin
@beerwin - I have deactivated all other plugins.... makes no difference. - Peter K
add_action( 'admin_enqueue_scripts', 'queue_LD4U_admin_scripts'); function queue_LD4U_admin_scripts() { wp_enqueue_script( 'jquery-ui-dialog' ); wp_enqueue_style('kastech-LD4U-manager-admin-ui-css', plugins_url() . '/kastech-LD4U-manager/includes/css/ld4u_dialogs.css', false); } - Peter K

1 Answers

1
votes

There was actually another css file being loaded that was changing the default behaviour of dialog buttons. I included

.ui-dialog button
{
    position: inherit !important;
}

in my css file and now have complete control over styling.

There still seems to be the issue that 

   wp_enqueue_script( 'jquery-ui-dialog' );

doesn't seem to do what it is supposed, but I have the workaround that I just include the js file from code.jquery.com directly in my script.