CODEWITHSUNDEEP
jquerycss
Vikas V
Vikas V

Reputation: 3186

dialogClass not applying the given style class

Am using 2 Jquery Dialog box in my xhtml page. There are 2 links and when a user clicks on those links each link will render a different Dialog box. Different Dialog box in the sense look and feel are different. Since both are referring to jquery-ui-rev.css whatever CSS changes are done in that .css file, it is getting applied to both the Dialog box.

Image from Chrome web developer is attached for reference

So, I tried with dialogClass . I applied dialogClass for one of the Dialog box and left the other as it is.

And I came up with below code and deployed it.

$j("#dialog").dialog({
    dialogClass: 'ui-dialog',
      ....

<head>
<style type="text/css">
 .ui-dialog
{
padding: none;
overflow: hidden;
position: absolute;
width: 100px;
left: 100px;
top: 100px;
}
</style>
</head>

But, ui-dialog class I have written here is not overriding the standard ui-dialog class of jquery-ui-rev.css. Then, I also tried with a different name for ui-dialog. i.e., I renamed ui-dialog with my-dialog. Even then my-dialog is not getting applied for Dialog box. It still takes from standard CSS class of ui-dialog.

Then, I also tried with below code

$j("#dialog").addClass('my-dialog').dialog({

This also couldn't override the standard ui-dialog class.

PS Note : I have renamed jquery-ui-rev.css to jquery-ui-curretpacks.css. jquery-ui-currentpacks.css contains exact contents of jquery-ui-rev.css

@Dipaks I have tried the solution as you have mentioned. Code is as below,

$('.ui-dialog').addClass('new-ui-dialog');
$j("#dialog").dialog({
    dialogClass: 'new-ui-dialog',
....

But, as I have attached in the new image, it can be seen that though ui-dialog is getting replaced by new-ui-dialog, but css properties are still taken from ui-dialog.

I also gave a try without dialogClass like below, $j("#dialog").dialog({ .....

<style type="text/css">
.new-ui-dialog
{
 //my new css
}
</style>

enter image description here

Am attaching 3rd image here. In this SS, new-ui-dialog attributes are overridden still. Image3

Upvotes: 1

Views: 5087

Answers (1)

Dipak
Dipak

Reputation: 12190

.ui-dialog is adding inline css for the element. If you want to override these styles do this - 

$('.ui-dialog').addClass('new-ui-dialog');

CSS - 

.new-ui-dialog { color: red !important; }

Upvotes: 1

Related Questions