jQuery UI Widgets › Forums › General Discussions › width of the Pop up auto suggestion list
Tagged: auto, auto-complete, Input, jqxinput, padding, pop-up, popup, suggestion, width
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 10 years, 11 months ago.
-
Author
-
Hello there,
I have implemented an auto suggestion input field using JQWidget. everything is fine but when I changed the input field Padding to Padding:5px in Style then that auto suggestion drop down list shrink 5px less than the input field. Now how can I change the width of auto suggestion drop down list back to the same width of my input field ?Here is my code:
<link rel="stylesheet" href="<?php echo base_url();?>system/application/views/admin/js/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="<?php echo base_url();?>system/application/views/admin/js/jqwidgets/styles/jqx.classic.css" type="text/css" /> <script type="text/javascript" src="<?php echo base_url();?>system/application/views/admin/js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="<?php echo base_url();?>system/application/views/admin/js/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="<?php echo base_url();?>system/application/views/admin/js/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="<?php echo base_url();?>system/application/views/admin/js/jqwidgets/jqxinput.js"></script> <style> .jqx-input { font-size: 13px; color: #4B4B4B; padding-left:5px; } </style> <script type="text/javascript"> $(document).ready(function () { $("#locality").jqxInput( { theme: 'bootstrap', width: 239, height:22, source: function (query, response) { var dataAdapter = new $.jqx.dataAdapter ( { datatype: "json", datafields: [ { name: 'AreaName', type: 'string'} ], url: '<?php echo base_url() ?>user/getAutoCompleteData' }, { autoBind: true, formatData: function (data) { data.query = query; return data; }, loadComplete: function (data) { if (data.length > 0) { response($.map(data, function (item) { return item.AreaName; })); } } } ); } }); }); </script>
Thanks in advance.
AshfaqHello Ashfaq,
Please make sure you are using the latest version of jQWidgets (3.0.4).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/hello Dimitar,
Thanks for you response. Actually It is the latest version .
regards
AshfakHi Ashfak,
After testing the following example:
<!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> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <style type="text/css"> .jqx-input { font-size: 13px; color: #4B4B4B; padding-left: 5px !important; } </style> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> </head> <body class='default'> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = ""; 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: 200, minLength: 1, theme: theme, source: countries }); }); </script> <input type="text" id="input" /> </div> </body> </html>
we were able to reproduce the issue. It will be fixed in the next version of jQWidgets. Thank you for your feedback.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.