user1184100 user1184100 - 2 months ago 10x
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() {



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