jQuery UI Widgets Forums General Discussions width of the Pop up auto suggestion list

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • width of the Pop up auto suggestion list #45975

    ashfaq
    Participant

    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.
    Ashfaq

    width of the Pop up auto suggestion list #45981

    Dimitar
    Participant

    Hello Ashfaq,

    Please make sure you are using the latest version of jQWidgets (3.0.4).

    Best Regards,
    Dimitar

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

    width of the Pop up auto suggestion list #45984

    ashfaq
    Participant

    hello Dimitar,
    Thanks for you response. Actually It is the latest version .
    regards
    Ashfak

    width of the Pop up auto suggestion list #45986

    Dimitar
    Participant

    Hi 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,
    Dimitar

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

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

You must be logged in to reply to this topic.