jQWidgets Forums

Tagged: Input, jqxinput, jqxwindow, modal, window

This topic contains 3 replies, has 3 voices, and was last updated by Peter Stoev 12 years, 3 months ago.

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

Author

jqxInput select list appears behind modal window Posts

March 1, 2013 at 5:04 am jqxInput select list appears behind modal window #16110

Member

Hello,

I am using the jqxWindow control to create modal dialog boxes that contain forms for the user to fill out. It works great, however when I put a jqxInput control on it and type in the box, the list of matches appears behind the window (if it is long enough I can see the last few entries extending past the bottom of the window).

I have reproduced this on the current versions of Chrome, Firefox, and IE9 (all on my Windows Vista box).

Thanks for your help

March 1, 2013 at 6:51 am jqxInput select list appears behind modal window #16112

Dimitar

Participant

Hello deadline,

We were not able to reproduce the reported issue using the latest version of jQWidgets (2.7). Here is an example that works on our side:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxwindow ").jqxWindow({ height: 200, width: 200, theme: 'summer', isModal: true });
                var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "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", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe");
                $("#input").jqxInput({ placeHolder: "Enter a Country", height: 25, width: 190, theme: "summer",
                    source: function (query, response) {
                        var item = query.split(/,\s*/).pop();
                        // update the search query.
                        $("#input").jqxInput({ query: item });
                        response(countries);
                    },
                    renderer: function (itemValue, inputValue) {
                        var terms = inputValue.split(/,\s*/);
                        // remove the current input
                        terms.pop();
                        // add the selected item
                        terms.push(itemValue);
                        // add placeholder to get the comma-and-space at the end
                        terms.push("");
                        var value = terms.join(", ");
                        return value;
                    }
                });
            });
        </script>
        <div id='jqxwindow'>
            <div>
                Header</div>
            <div>
                <input id="input" /></div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

March 1, 2013 at 6:58 am jqxInput select list appears behind modal window #16113

Dimitar

Participant

Hello deadline,

We were not able to reproduce the reported issue using the latest version of jQWidgets (2.7). Here is an example that works on our side:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
    <link rel=\"stylesheet\" href=\"../../jqwidgets/styles/jqx.base.css\" type=\"text/css\" />
    <link rel=\"stylesheet\" href=\"../../jqwidgets/styles/jqx.summer.css\" type=\"text/css\" />
    <script type=\"text/javascript\" src=\"../../scripts/jquery-1.9.1.min.js\"></script>
    <script type=\"text/javascript\" src=\"../../jqwidgets/jqxcore.js\"></script>
    <script type=\"text/javascript\" src=\"../../jqwidgets/jqxwindow.js\"></script>
    <script type=\"text/javascript\" src=\"../../jqwidgets/jqxinput.js\"></script>
</head>
<body>
    <div id=\'content\'>
        <script type=\"text/javascript\">
            $(document).ready(function () {
                $(\"#jqxwindow \").jqxWindow({ height: 200, width: 200, theme: \'summer\', isModal: true });
                var countries = new Array(\"Afghanistan\", \"Albania\", \"Algeria\", \"Andorra\", \"Angola\", \"Antarctica\", \"Antigua and Barbuda\", \"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\", \"Japan\", \"Jordan\", \"Kazakhstan\", \"Kenya\", \"Kiribati\", \"Korea, North\", \"Korea, South\", \"Kuwait\", \"Kyrgyzstan\", \"Laos\", \"Latvia\", \"Lebanon\", \"Lesotho\", \"Liberia\", \"Libya\", \"Liechtenstein\", \"Lithuania\", \"Luxembourg\", \"Macedonia\", \"Madagascar\", \"Malawi\", \"Malaysia\", \"Maldives\", \"Mali\", \"Malta\", \"Marshall Islands\", \"Mauritania\", \"Mauritius\", \"Mexico\", \"Micronesia\", \"Moldova\", \"Mongolia\", \"Morocco\", \"Monaco\", \"Mozambique\", \"Namibia\", \"Nauru\", \"Nepal\", \"Netherlands\", \"New Zealand\", \"Nicaragua\", \"Niger\", \"Nigeria\", \"Norway\", \"Oman\", \"Pakistan\", \"Panama\", \"Papua New Guinea\", \"Paraguay\", \"Peru\", \"Philippines\", \"Poland\", \"Portugal\", \"Qatar\", \"Romania\", \"Russia\", \"Rwanda\", \"Samoa\", \"San Marino\", \" Sao Tome\", \"Saudi Arabia\", \"Senegal\", \"Serbia and Montenegro\", \"Seychelles\", \"Sierra Leone\", \"Singapore\", \"Slovakia\", \"Slovenia\", \"Solomon Islands\", \"Somalia\", \"South Africa\", \"Spain\", \"Sri Lanka\", \"Sudan\", \"Suriname\", \"Swaziland\", \"Sweden\", \"Switzerland\", \"Syria\", \"Taiwan\", \"Tajikistan\", \"Tanzania\", \"Thailand\", \"Togo\", \"Tonga\", \"Trinidad and Tobago\", \"Tunisia\", \"Turkey\", \"Turkmenistan\", \"Uganda\", \"Ukraine\", \"United Arab Emirates\", \"United Kingdom\", \"United States\", \"Uruguay\", \"Uzbekistan\", \"Vanuatu\", \"Venezuela\", \"Vietnam\", \"Yemen\", \"Zambia\", \"Zimbabwe\");
                $(\"#input\").jqxInput({ placeHolder: \"Enter a Country\", height: 25, width: 190, theme: \"summer\",
                    source: function (query, response) {
                        var item = query.split(/,\\s*/).pop();
                        // update the search query.
                        $(\"#input\").jqxInput({ query: item });
                        response(countries);
                    },
                    renderer: function (itemValue, inputValue) {
                        var terms = inputValue.split(/,\\s*/);
                        // remove the current input
                        terms.pop();
                        // add the selected item
                        terms.push(itemValue);
                        // add placeholder to get the comma-and-space at the end
                        terms.push(\"\");
                        var value = terms.join(\", \");
                        return value;
                    }
                });
            });
        </script>
        <div id=\'jqxwindow\'>
            <div>
                Header</div>
            <div>
                <input id=\"input\" /></div>
        </div>
    </div>
</body>
</html>