Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQWidgets jqxDropDownButton height Property

  • Last Updated : 18 Jan, 2022

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDropDownButton is used to illustrate a jQuery widget that contains a number of selectable as well as expandable items displayed in the dropdown button.

The height property is used to set or get the height of the displayed dropdown button. It is of type number or string and its default value is null.

Syntax:

To set the height property.

  •  
$('#jqxDropDownButton').jqxDropDownButton({ height: '25px' });  

To get the height property.

  •  
var height = $('#jqxDropDownButton').jqxDropDownButton('height');

Linked Files: Download jQWidgets from the link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>

Example: The below example illustrates the jqxDropDownButton height property in jQWidgets.

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet"
          href="jqwidgets/styles/jqx.base.css"
          type="text/css"/>
    <script type="text/javascript"
            src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript"
            src="jqwidgets/jqxcore.js"></script>
     <script type="text/javascript"
             src="jqwidgets/jqx-all.js"></script>
    <script type="text/javascript"
            src="jqwidgets/jqxbuttons.js">
    </script>
  </head>
 
  <body>
    <center>
      <h1 style="color: green">GeeksforGeeks</h1>
      <h3>jQWidgets jqxDropDownButton height property</h3>
      <br />
      <div>
        <input
          type="button"
          id="jqxBtn"
          style="margin-bottom: 25px"
          value="Click here"
        />
      </div>
      <div id="log"></div>
      <div style="float: center" id="jqxDdB">
        <div id="jqxT">
          <ul>
            <li>GFG</li>
            <li>
              Languages
              <ul>
                <li>C</li>
                <li>Java</li>
              </ul>
            </li>
            <li>
              Subjects
              <ul>
                <li>Data Structure</li>
                <li>Algorithm</li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </center>
 
    <script type="text/javascript">
      $(document).ready(function () {
        $("#jqxBtn").jqxButton({
          width: "120px",
          height: "40px",
        });
 
        $("#jqxDdB").jqxDropDownButton({
          height: "30px",
          width: "70px",
        });
        $("#jqxT").jqxTree({});
        $("#jqxDdB").jqxDropDownButton("setContent", "Select");
 
        $("#jqxBtn").on("click", function () {
          var h = $("#jqxDdB").jqxDropDownButton("height");
          $("#log").html("Dropdown button's height: " + h);
        });
      });
    </script>
  </body>
</html>

Output:

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxbutton/jquery-button-api.htm?search=


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!