CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-dialog
Praveen Lobo
Praveen Lobo

Reputation: 7187

jQuery dialog: how to control the button-pane height

How do I manually adjust/set the height of the button-pane in the jQuery dialog without changing the CSS file? I want to adjust the height of the DIV that contains the message and the DIV that contains the button(marked in green lines) from Javascript.

jQuery Dialog

function showMessageDialog(title, message, width){
     // create div if it doesn't exist already
     if(!$("#msgDialogDiv").length) {
         $("<DIV></DIV>").appendTo("body").attr("id","msgDialogDiv");
     }
     // set the message
     $("#msgDialogDiv").html(message).css("color","red");

     // show the dialog
     $("#msgDialogDiv").dialog({
        modal: true, resizable: false, draggable: false, title: title, width: width,
        buttons: {OK: function(){$(this).dialog("close");}}
      });

      // This changes the height as I want.
      // $("#msgDialogDiv").css({"overflow":"hidden","height":"10px"});
      // this changes the font on button
      //$("#msgDialogDiv").dialog("widget").find(".ui-button-text").css("font-size", "11px");
      return;
}

showMessageDialog("Hello Stackoverflow!", "This is my first question on stackoverflow",400);

While posting this question I tried to adjust the DIV height and it worked. I also tried changing the font-size of the button, but that just changes the size of the button. I want to control the size of that entire DIV. Is it due to the padding around the button?

Upvotes: 2

Views: 10829

Answers (4)

Basit
Basit

Reputation: 8606

This is an old post. But this can also be done in following way.

Let say you have following div in html

<div id="no-record-found-message" title="No Record found" >
    <p>No Record found for the selected event</p>
</div>

In Js while creating dialog assigns a class

function createNoRecordFoundDialog(div) {

    var $noRecordFoundDiv = $("#" + div);

    var $noRecordFoundDialog = $noRecordFoundDiv.dialog({
        autoOpen: false,                // set this to false so we can manually open it
        dialogClass: "noRecordFound",   // your css class
        width: 250,
        show: {
            effect: "scale",
            duration: 1000
        },
        hide: {
            effect: "scale",
            duration: 1000
        },
        modal: true,
        resizable: false,
        buttons: {
            Ok: function() {
                $( this ).dialog( "close" );
            }
        }
    }); // end of dialog

    return $noRecordFoundDialog;
}

css

.noRecordFound .ui-dialog-buttonpane {
    margin: 0px !important;
    padding: 0px !important;
}

.noRecordFound .ui-dialog-content {
    min-height: 38px !important;
}

Upvotes: 0

Alnitak
Alnitak

Reputation: 339786

Put the following in your own custom CSS file, loaded after the jQuery UI CSS:

.ui-dialog .ui-dialog-buttonpane {
    margin: 0px;
    padding: 0px;
}

The double selector is needed because of CSS specificity rules. Without the .ui-dialog prefix you can't override the earlier loaded default.

See http://jsfiddle.net/alnitak/UQAqg/

Upvotes: 5

Praveen Lobo
Praveen Lobo

Reputation: 7187

Found it myself. This is what I was looking for.

// set the size of the button
$("#msgDialogDiv").dialog("widget")
                  .find(".ui-button-text").css("font-size", "10px")

// this is not required. but doesn't hurt. To hardcode the height, 
// just change to height instead of minHeight
//$("#msgDialogDiv").css({"minHeight":"10px"})

// button pane style
$("#msgDialogDiv").dialog("widget").find(".ui-dialog-buttonpane")
                  .css({"padding":".1em .1em .1em 0","margin":"0 0 0 0"} )

// button style
$("#msgDialogDiv").dialog("widget").find("button")
                  .css({"padding":"0 .2em 0 .2em","margin":"0 .5em 0 0"} )

Upvotes: 6

Naftali
Naftali

Reputation: 146302

Just change the jQueryUI.css file

Upvotes: -2

Related Questions