CODEWITHSUNDEEP
jquerycssjquery-uidialog
Majid
Majid

Reputation: 14243

Customize jQuery UI dialog style

I have this dialog:

var dialog1 = $('<div>').dialog({ 
    autoOpen: false, 
    modal: true,
    closeText: null,
    hide: "scale",
    show:"fade",
    height: 'auto',
    width: 450,
    dialogClass:"edialog"
});

when I want to customize style,inline style overrides my style:

overrriding

How can I force dialog to use my style without using !important or edit generated inline style?

Upvotes: 0

Views: 6587

Answers (2)

TVT. Jake
TVT. Jake

Reputation: 275

  1. You find custom dialog in CSS

  2. The example, if you want edit width of dialog, only add "!important" after width:

    .ui-dialog { position: relative; padding: .2em; width: 500px !important;}

Upvotes: 0

Justin
Justin

Reputation: 3397

You don't. Inline has the highest precedence over the selector chain. The only way to override it, that I know of, is to modify the DOM of the element or use !important.

I would say if they went through the trouble of defining the styles inline, it is for a good reason and probably shouldn't be modified.

Here would be the difference between using !important and changing the inline style with jQuery:

jQuery: $(".ui-dialog").css({ "position" : "fixed", "top" : "50%" });

css: .ui-dialog { position: fixed !important; top: 50% !important; }

Dialog Options (Barmar's comment):

$(".my-form").dialog({ position: { my: "top", at: "top" } });

It depends on how you feel and want to manage your source code. CSS seems like a easier and more elegant solution to me if you can't do it through the properties the Dialog object exposes.

Upvotes: 2

Related Questions