CODEWITHSUNDEEP
jquerycssjquery-ui
Renukshan Saputhanthri
Renukshan Saputhanthri

Reputation: 85

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

Upvotes: 7

Views: 28845

Answers (4)

BEDI
BEDI

Reputation: 41

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

this worked for me

Upvotes: 1

live-love
live-love

Reputation: 52424

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(); }
    }
]);

Upvotes: 7

mu is too short
mu is too short

Reputation: 434695

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

Upvotes: 16

jaychapani
jaychapani

Reputation: 1509

<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

Upvotes: 1

Related Questions