jQueryダイアログ：ボタンペインの高さを制御する方法

Question

CSSファイルを変更せずにjQueryダイアログのボタンペイントの高さを手動で調整/設定するにはどうすればよいですか？メッセージを含むDIVの高さと、Javascriptのボタン（緑色の線でマークされている）を含むDIVを調整したい。

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); 

私はDIVの高さを調整しようとした、この質問を投稿し、それが働いている間。私はまた、ボタンのフォントサイズを変更しようとしましたが、それはボタンのサイズを変更するだけです。そのDIV全体のサイズを制御したい。ボタン周りのパディングが原因ですか？

Answer 1

自分で見つけました。これは私が探していたものです。

// 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"}) 

Answer 2

だけのjQuery UI CSSの後にロードされ、独自のカスタムCSSファイルに次のように入れて