Configuring the dialog's dimensions

There are several options related to the dialog's size, and the minimum and maximum size that it can be resized to. We can add all of these options to the next example as they're all related, to save looking at them individually. Change the configuration object in dialog8.html to the following:

$("#myDialog").dialog({
  width: 500,
  height: 300,
  minWidth: 150,
  minHeight: 150,
  maxWidth: 600,
  maxHeight: 450
});

Save this file as dialog9.html. The effect these options have on the widget is simple; the width and height options define how big the dialog is when it is first opened, while the min- and max- options define how small or large the dialog can be resized to respectively.

Tip

As an additional note, assistive technologies and keyboard users may find the content difficult to navigate if the dialog is made too small. There is a usability tenet that insists dialog boxes should always be non-resizable, whereas the windows should always be resizable...