jQuery dialog: how to control the button-pane height

Tags: jquery,css,jquery-ui,jquery-ui-dialog

Problem :

How to manually adjust/set the height of the button-pane in the jQuery dialog without chaning 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) {
     // set the message

     // show the 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");

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 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?

Solution :

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

// set the size of the button
                  .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

// button pane style
                  .css({"padding":".1em .1em .1em 0","margin":"0 0 0 0"} )

// button style
                  .css({"padding":"0 .2em 0 .2em","margin":"0 .5em 0 0"} )

    CSS Howto..

    How to show hide divs INSIDE divs easily?

    How to set a background image in rails from css?