CODEWITHSUNDEEP
jquerycss
emeraldhieu
emeraldhieu

Reputation: 9439

Remove all styles of DOM in child layout

I have this code to show a dialog. 

$("#duplicateDialog").dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    draggable: false,
    buttons: {
        "Cancel": function() {
            $(this).dialog("close");
        },
        "OK": function() {
            $(this).dialog("close");
        }
    }
});

$("#duplicateDialog").dialog("open");

The problem is the parent layout already changed the button's styles.

button {
    height: 22px!important;
    padding: 0 2px!important;   
}

Now I'd like to remove the "height" and "padding" above in child layout. How to do it?

Note: The child layout extends from another layout which includes the above button style.

Upvotes: 0

Views: 77

Answers (3)

Vassilis
Vassilis

Reputation: 2841

Just to give you another option... Apprise allows for a custom css class - className - on the buttons.

Upvotes: 0

dezman
dezman

Reputation: 19368

The only thing that will override those styles, if they are present, is inline styling that also has !important. so, <button style="height: 0 !important; padding: 0 !important;"></button>.

You can find where they are being added by jQuery, probably with append() or prepend(). And add your inline styles there, so something like:

$('.parent').append('<div class="yourSituation" style="border: 0; padding: 0;"></div>');

Upvotes: 2

PSL
PSL

Reputation: 123739

You can give a class for your dialog buttons guess above jquery 1.8+

    ....
  buttons:{
               "cancel" : {

                "class": 'myClass', 
                click: function() {
}
...

Upvotes: 4

Related Questions