Open In App

jQuery UI Dialog minWidth Option

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

Dialog minWidth option is used to set the minimum width that can be set to the dialog box in pixels. By default, the value is 150.

Syntax:

$( ".selector" ).dialog({
  minWidth : 150
});

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,
        minWidth: 150
      });

      $("#geeks").click(function () {
        $("#gfg").dialog("open");
      });
    });
  </script>
</head>
<body>
  <div id="gfg">
    Jquery UI| minWidth 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: true,
        minWidth: 500
      });
    });
  </script>
</head>
<body>
  <div id="gfg">
    Jquery UI| minWidth dialog option
  </div>
</body>
</html>

Output:


Article Tags :

Similar Reads