CODEWITHSUNDEEP
javascriptjqueryjquery-ui
user1032531
user1032531

Reputation: 26281

Make jQueryUI autocomplete height dependent upon parent

I have a jQueryUI autocomplete inside a jQueryUI dialog. The dialog has a given height (i.e. 200px), and thus the autocomple must have a height less than the dialog so that the scroll bar will be shown. I've implemented it by hardcoding a 100px height to the autocomplete. Instead of hardcoding this height, how can I make the height dependent upon the parent's height?

http://jsbin.com/xunazowiqa/1/

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function() {
                var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];

                $("#open").click(function() {$("#dialog").dialog("open");});
                $('#dialog').dialog({
                    autoOpen    : false,
                    resizable   : false,
                    height      : 200,
                    width       : 400, 
                    modal       : true,
                    open        : function() {
                        console.log(this,$(this));
                        $(this).find('input').val('')
                        .autocomplete({source: availableTags})
                        .parent().next('ul.ui-autocomplete')
                        .attr('style', 'max-height: 100px; overflow-y: auto; overflow-x: hidden;')
                    }
                });
            });
        </script>
    </head>

    <body>
        <button id="open">Open</button>
        <div id="dialog" title="DIALOG TITLE"><input></div>
    </body> 
</html>

Upvotes: 0

Views: 671

Answers (3)

Akash Chavda
Akash Chavda

Reputation: 1227

you can try like this

console.log(this,$(this));
var height = $(this).height();
console.log(height);
$(this).find('input').val('')
.autocomplete({source: availableTags})
.parent().next('ul.ui-autocomplete')
.attr('style', 'max-height: 100px; overflow-y: auto; overflow-x: hidden;')

you can put this code in open function in this code you can get height of dialog box and after you can manage by yourself.

Upvotes: 2

Eriks
Eriks

Reputation: 306

height css propery has an attribute inherit Inherits this property from its parent element.

Upvotes: 0

Kevin Grabher
Kevin Grabher

Reputation: 399

To modify heights in jquery use the .height() function.

Using this you can read the height of any element and set it based on any calculation you like for another one.

Upvotes: 1

Related Questions