user1184100 user1184100 - 1 year ago 85
jQuery Question

custom placement of buttons in dialog box - jquery ui

I wanted to move the buttons added to my dialog box to either top or left how can this be done i'm using jquery ui. When ok is added it shows up at extreme right end can this be placed around ?

$(function() {
modal : true,
resizable : false,
buttons : {
ok:function() {


Answer Source

To place the buttons left/center/right aligned, disable the floating and adjust the text-align property accordingly:

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
   float: none;

.ui-dialog .ui-dialog-buttonpane {
     text-align: center; /* left/center/right */


This is the markup for the buttons:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <div class="ui-dialog-buttonset">
        <!-- the buttons are here -->

The default css specifies:

  • text-align: left; for the element .ui-dialog-buttonpane
  • float:right for the element .ui-dialog-buttonset
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download