Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issues adding a class to jquery ui dialog

Tags:

jquery-ui

I'm trying to add an additional class to my jQuery dialog with the dialogClass property. Here's the javascript:

$(function(){
    $( "#toogleMAmaximized" ).dialog({
            title: 'Missions and Achivments',
            autoOpen: false,
            height: 500,
            width: 700,
            modal: true,
            dialogClass: 'noPadding',
            buttons: {
                    Cancel: function() {
                            $( this ).dialog( "close" );
                    }
            },
            close: function() {
                    allFields.val( "" ).removeClass( "ui-state-error" );
            }

    })
    $( "#toogleMAminimized" ).click(function() {
            $( "#toogleMAmaximized" ).dialog( "open" );
            $( "#toogleMAmaximized" ).dialog({dialogClass:'noPadding'});
    });
})

<div id="toogleMAminimized" style="" class="noPadding">
<div class="" style="cursor: pointer;position: absolute;right: 0;top: 45px;"><img src ="images/MAminimized.png" alt="missions and achivments"/></div>
</div>

Just in case you need it, my html code

<div id="toogleMAmaximized" >
<div id="missions">
    <div id="mission1" missiontitle="A new home!" missionpoint="1" missionicon="images/missions/icon/anewhome-icon.png" missionimage="images/missions/anewhome.png" made="f" class="mission notDone">  </div>
</div>
<div id="achivments">
    <div id="achivment1" achivmenttitle="Lucha sin cuartel!" achivmentpoint="10" achivmenticon="images/achivments/icon/1.png" achivmentimage="images/achivments/icon/luchasincuartel-plata-ico.png" made="t" class="achivment done">  </div>
</div>
</div>

As you can see, I've tried to add the class in many ways, I've tried all possible combinations but keep getting the same result: no noPadding class

like image 395
KoU_warch Avatar asked May 28 '12 16:05

KoU_warch


1 Answers

Your noPadding class is being added successfully to the dialog. I have confirmed this by placing your markup and scripts within a fiddle, and loading jQuery UI 1.8.16 (the version you were testing with). This test is available online at http://jsfiddle.net/QHJKm/3/.

I suspect the confusion here is with the expected effect noPadding is going to have on the dialog itself. It could be that you interpreted its lack of effect as an indication it wasn't added to begin with. As you'll note in my example, I've got with a rather bold style, a red background. This quickly confirms that the class is indeed being added to the dialog.

like image 194
Sampson Avatar answered Nov 25 '22 15:11

Sampson