jQuery UI Widgets Forums Editors Input, Password Input, TextArea, ColorPicker, Rating, TagCloud, Loader Input source Drop down not working in jqxWindow

This topic contains 2 replies, has 2 voices, and was last updated by  dishmann 2 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • dishmann

    My app is using a jqxInput inside a jqxWindow. The issue I am having is the drop down showing possible matches as the user types into the jqxInput is not appearing as it does in the default functionality sample. I have tried everything I could to make it work and have hit a brick wall.

    Here is the code demonstrating the issue.
    <html lang=”en”>
    <title>jqxInput default functionality Tested in a pop-up window</title>
    <link rel=”stylesheet” href=”../styles/jqx.base.css” type=”text/css” />
    <meta charset=”utf-8″ />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
    <script type=”text/javascript” src=”../scripts/jquery.js”></script>
    <script type=”text/javascript” src=”../scripts/jqxcore.js”></script>
    <script type=”text/javascript” src=”../scripts/jqxinput.js”></script>
    <script type=”text/javascript” src=”../scripts/jqxwindow.js”></script>
    <script type=”text/javascript” src=”../scripts/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../scripts/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../scripts/jqxpanel.js”></script>
    <script type=”text/javascript” src=”../scripts/jqxtabs.js”></script>
    <script type=”text/javascript” src=”../scripts/jqxcheckbox.js”></script>

    <div id=”outerWrapper”>
    <div id=”popup”>
    <div>Pop-Up Title</div>
    <input type=”text” id=”input” style=”width:300px;” />

    <script type=”text/javascript”>

    $(document).ready(function () {
    position: { x: 200, y: 50 },
    height: 300, width:500,
    resizable: false, isModal: true, modalOpacity: 0.3,
    initContent: function () {
    var countries = new Array(“Afghanistan”, “Albania”, “Algeria”, “Andorra”, “Angola”, “Antarctica”, “Argentina”, “Armenia”, “Australia”, “Austria”, “Azerbaijan”, “Bahamas”, “Bahrain”, “Bangladesh”, “Barbados”, “Belarus”, “Belgium”, “Belize”, “Benin”, “Bermuda”, “Bhutan”, “Bolivia”, “Bosnia and Herzegovina”, “Botswana”, “Brazil”, “Brunei”, “Bulgaria”, “Burkina Faso”, “Burma”, “Burundi”, “Cambodia”, “Cameroon”, “Canada”, “Cape Verde”, “Central African Republic”, “Chad”, “Chile”, “China”, “Colombia”, “Comoros”, “Congo, Democratic Republic”, “Congo, Republic of the”, “Costa Rica”, “Cote d’Ivoire”, “Croatia”, “Cuba”, “Cyprus”, “Czech Republic”, “Denmark”, “Djibouti”, “Dominica”, “Dominican Republic”, “East Timor”, “Ecuador”, “Egypt”, “El Salvador”, “Equatorial Guinea”, “Eritrea”, “Estonia”, “Ethiopia”, “Fiji”, “Finland”, “France”, “Gabon”, “Gambia”, “Georgia”, “Germany”, “Ghana”, “Greece”, “Greenland”, “Grenada”, “Guatemala”, “Guinea”, “Guinea-Bissau”, “Guyana”, “Haiti”, “Honduras”, “Hong Kong”, “Hungary”, “Iceland”, “India”, “Indonesia”, “Iran”, “Iraq”, “Ireland”, “Israel”, “Italy”, “Jamaica”, “Uruguay”, “Uzbekistan”, “Vanuatu”, “Venezuela”, “Vietnam”, “Yemen”, “Zambia”, “Zimbabwe”);
    $(“#input”).jqxInput({ placeHolder: “Enter a Country”, height: 25, width: 200, minLength: 1, source: countries });


    Could someone please help me through this. While I “could” use a jqxComboBox, (and I will try that in this scenario as well), I want a textbox (jqxInput). Because it is much cooler to see the list from a textbox IMHO.

    Thanks a lot.

    Best regards to you all BTW 🙂


    Hello dishmann,

    You need to set the z-index of the dropdown pop-up to be greater than that of the window.
    jqxInput has the popupZIndex property.
    Here is an Example.

    Best Regards,

    jQWidgets Team


    Thanks Martin

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.