jQuery UI Dialog maxHeight Option - GeeksforGeeks

12 Jan, 2021
Dialog maxHeight option is used to set the maximum height that can be set to the dialog box. By default, value is false.
Syntax:
$( ".selector" ).dialog({
    maxHeight : 10
});
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” 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>
Example 1:
HTML
<!doctype html><html lang="en">  <head>    <meta charset="utf-8">    <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,                maxHeight: false            });            $("#geeks").click(function () {                $("#gfg").dialog("open");            });        });    </script></head>  <body>    <div id="gfg" title="GeeksforGeeks">        Jquery UI| maxHeight dialog option        Jquery UI| maxHeight dialog option        Jquery UI| maxHeight dialog option        Jquery UI| maxHeight dialog option        Jquery UI| maxHeight dialog option        Jquery UI| maxHeight dialog option        Jquery UI| maxHeight dialog option    </div>      <button id="geeks">Open Dialog</button></body>  </html>
Output:
Example 2:
HTML
<!doctype html><html lang="en">  <head>    <meta charset="utf-8">    <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,                maxHeight: 10            });            $("#geeks").click(function () {                $("#gfg").dialog("open");            });        });    </script></head>  <body>    <div id="gfg" title="GeeksforGeeks">        Jquery UI| maxHeight dialog option        Jquery UI| maxHeight dialog option        Jquery UI| maxHeight dialog option        Jquery UI| maxHeight dialog option        Jquery UI| maxHeight dialog option        Jquery UI| maxHeight dialog option        Jquery UI| maxHeight dialog option    </div>          <button id="geeks">Open Dialog</button></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
jQuery-UI
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?