7

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

<div style="font-size: 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

3
  • what do you need to change it to? Also why not just EDIT the CSS that corresponds to these 2 elements?
    – Jakub
    Mar 22, 2011 at 3:47
  • i Need to change the button size??? Mar 22, 2011 at 4:03
  • which JS you r using? will u please provide HTML code also or just paste your code in jsfiddle.net
    – xkeshav
    Mar 22, 2011 at 4:46

4 Answers 4

16

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

0
7

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(); }
    }
]);
1
  • I think that's the best solution if we want all buttons in specific dialog to have same width, but not to override css for all dialogs. Thank you!
    – P R
    Jul 29, 2014 at 7:46
1
<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

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

this worked for me

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.