Input source Drop down not working in jqxWindow - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: jqxinput, jqxwindow

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

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

Author

Input source Drop down not working in jqxWindow Posts
November 27, 2018 at 5:05 pm Input source Drop down not working in jqxWindow #102934

dishmann
Participant

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”>
<head>
<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>

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

</div>
<script type=”text/javascript”>

$(document).ready(function () {
$(‘#popup’).jqxWindow({
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 });
}
});
});

</script>
</body>
</html>
=====

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 🙂

November 28, 2018 at 11:43 am Input source Drop down not working in jqxWindow #102947

Martin
Participant

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,
Martin

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

November 28, 2018 at 5:17 pm Input source Drop down not working in jqxWindow #102957

dishmann
Participant

Thanks Martin
Author

Posts

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

You must be logged in to reply to this topic.