jQuery UI Dialog minWidth Option
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= rel="stylesheet"> <script src= </script> <script src= </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= rel="stylesheet"> <script src= </script> <script src= </script> <script> $(function () { $("#gfg").dialog({ autoOpen: true, minWidth: 500 }); }); </script> </head> <body> <div id="gfg"> Jquery UI| minWidth dialog option </div> </body> </html> |
Output:
Please Login to comment...