How To change the button size in the Jquery Ui confirmation dialog?

My code is below.i need to change the button size in the ok and cancel in the button.

<div style="font-si开发者_Go百科ze: medium" id="dialog" title="Confirmation Required">
  Story Will Be Deleted??
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      width:300,
      hight:400,
      fontSize:10,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");
      // $dialog.attr('font-size', '8px');

    $("#dialog").dialog({
      buttons : {

        "OK" : function() {

          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

Thanks

You can do this with a little bit of CSS, all you need to do is reduce the font size:

#dialog .ui-button-text {
    font-size: 10px; /* Or whatever smaller value works for you. */
}

You can also drop the padding:

#dialog .ui-button-text {
    font-size: 10px;
    padding: 1px 1px 1px 1px; /* Or whatever makes it small enough. */
}

These adjustments are specific to your dialog (hence the #dialog in the CSS selector) to avoid messing up any other jQuery-UI buttons you're using. If you want to make all the buttons smaller, then apply the changes to your jQuery-UI theme CSS.

The easiest way to figure out which classes to adjust is to use a DOM inspector (Firebug has one, WebKit has a better (IMHO) one).

You can set the button width like in this example:

$('#MyDialog').dialog("option", "buttons", [

    {
        text: "Reset",
        width: "100",
        click: function () { Reset(className); }
    },

    {
        text: "Save",
        width: "100",
        click: function () { Update(className); }
    },
    {
        text: "Cancel",
        width: "100",
        click: function () { Close(); }
    }
]);

<style type="text/css">
    .ui-widget, .ui-widget button {
        font-family: Verdana,Arial,sans-serif;
        font-size: 0.8em;
    }
    </style>

Try this i m using CSS : smoothness/jquery-ui-1.8.9.custom.css JS : jquery-1.4.4.min.js and jquery-ui-1.8.9.custom.min.js

.ui-button .ui-button-text{
     font-size: 12px;
}

this worked for me