JQueryUI Dialog - style not generated for buttons

I use the following code to show a dialog with jQuery UI:

var $dialog = $('<div></div>')
.text(msg)
.dialog({
    autoOpen: false,
    height: 140,
    modal: true,
    title: "Confirm",
    buttons: {
        "Yes": function() {
            $(this).dialog('close');
        },
        "Cancel": function() {
            $(this).dialog('close');
        }
    }
});
$dialog.dialog('open');

Buttons do not have styles. I noticed that the HTML created for the buttons:

<div class="ui-dialog-buttonset">
    <button>Yes</button>
    <button>Cancel</button>
</div>

From the jQuery UI demos, these are:

<div class="ui-dialog-buttonset">
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Ok</span></button>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button>
</div>

those. CSS styles are missing. Do you know, why?

+5
source share
1 answer

Perhaps because CSS files are missing? Do you really turn them on? Then use firebug or httpfox to find out if there are 404 somewhere ...

Edit: I include jQuery-ui css as follows: <link type="text/css" href="blah/css/smoothness/jquery-ui-1.8.custom.css" rel="stylesheet" />

0
source

All Articles