Open In App

jQuery UI Dialog width Option

Last Updated : 18 Jan, 2021
Comments
Improve
Suggest changes
Like Article
Like
Report

Dialog width option is used to set the width of the dialog box in pixels. By default, the value is 300.

Syntax:

$( ".selector" ).dialog({
  width : 120
});

Approach: First, add jQuery UI scripts needed for your project.

<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Example 1:

HTML 
<!doctype html>
<html>
<head>
  <link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
        rel="stylesheet">
  <script src=
"https://code.jquery.com/jquery-1.10.2.js">
  </script>
  <script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
  </script>
  <script>
    $(function () {
      $("#gfg").dialog({
        autoOpen: false,
        width: 100
      });
      $("#geeks").click(function () {
        $("#gfg").dialog("open");
      });
    });
  </script>
</head>
<body>
  <div id="gfg">
    Jquery UI| width dialog option
  </div>
  <button id="geeks">Open Dialog</button>
</body>
</html>

Output:

Example 2:

HTML 
<!DOCTYPE html>
<html>
<head>
  <link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
        rel="stylesheet">
  <script src=
"https://code.jquery.com/jquery-1.10.2.js">
  </script>
  <script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
  </script>
  <script>
    $(function () {
      $("#gfg").dialog({
        autoOpen: false,
        width: 300
      });
      $("#geeks").click(function () {
        $("#gfg").dialog("open");
      });
    });
  </script>
</head>
<body>
  <div id="gfg">
    Jquery UI| width dialog option
  </div>
  <button id="geeks">Open Dialog</button>
</body>
</html>

Output:


T
taran910
Improve
Article Tags :

Explore

Lightbox