List Text Posisition on Combobox

[matchday73Member]

Dear Peter Stoev

Help me please, for problem when combobox is part of tab, in this case when back or call back from other tab choice , the positition text on list combox box selection before is change, Thanks for help solution.

[Peter StoevKeymaster]

Hi matchday73,

Could you please post the code which reproduces the issue? To format the HTML + JavaScript, use the ‘format code block button’ in the toolbar.

Please also include the following information in your post:

– jQuery version, jQWidgets version, device type(PC, Mobile), browser name and version.
– Please, provide step by step instructions on how to reproduce the reported issue.

Looking forward to your reply.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[matchday73Member]

tanks for your respond , this case i use JqWidgets 1.8, JQuery core 1.7.1 , Browser Mozilla FireFox, Google Chrom, device type PC Only, cause i use for web base application development.
to make simple explain of case i use modal window and tab, and use combobox part in tab object , i try to load combo and use source adapter data json php, for compare combobox work i create 2 combobox 1st i create combobox out of tab object, and 2nd combobox place on tab element object , when succes load element list box from data source to 1st and 2nd combo , i try to choice selected item to all combobox created , to continue i try hover and move to other tab element, or move and back where tab contain combobox, that i find problem for 2nd combobox on tab content , list item text positition added y positition or vertical position. for coplete source code :

1. HTML Include and link of Java Script, JQuery, CSS element

2. Script for Initial Data and Jqwidgets interface element.

$(document).ready(function () {

// Initial theme
var theme = ‘classic’;

var source =
{
datatype: “json”,
datafields: [
{ name: ‘EmployeeID’},
{ name: ‘FirstName’},
{ name: ‘LastName’},
{ name: ‘Title’},
{ name: ‘Address’},
{ name: ‘City’},
{ name: ‘Country’}

],
id: ‘EmployeeID’,
url: ‘./appdb/data.php’

};

// Initial Interface

var dataAdapter = new $.jqx.dataAdapter(source);
$(“#combo1”).jqxComboBox(
{
width: 200,
height: 25,
source: dataAdapter,
theme: theme,
selectedIndex: 0,
displayMember: “FirstName”,
valueMember: “EmployeeId”
});
$(“#combo1”).bind(‘select’, function (event) {

});

$(“#combo2”).jqxComboBox(
{
width: 200,
height: 25,
source: dataAdapter,
theme: theme,
selectedIndex: 0,
displayMember: “FirstName”,
valueMember: “EmployeeId”
});
$(“#combo2”).bind(‘select’, function (event) {

});

$(‘#tabdata’).jqxTabs({ theme: theme , height: 250, width: 700, selectionTracker : true, animationType: ‘fade’});
$(‘#win_modals’).jqxWindow({ theme : theme,isModal: true, autoOpen:true,height: 500, width: 900});

});

3. HTML Page Interface.

Tab Data

Tab 1
Tab 2
Tab 3

First Name:

so Dear Peter I’m so Sorry, this may to long for expalain, and i think my english very bad, i’m from indonesia ,help me
and good luck and success for Jqwidgets.

[matchday73Member]

1. HTML Include and link of Java Script, JQuery, CSS element

[matchday73Member]

[matchday73Member]

[matchday73Member]

<code>
 <script type="text/javascript" src="./appcore/js/scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="./appcore/js/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./appcore/js/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="./appcore/js/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="./appcore/js/jqwidgets/jqxcheckbox.js"></script>
	<script type="text/javascript" src="./appcore/js/jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="./appcore/js/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="./appcore/js/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="./appcore/js/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="./appcore/js/jqwidgets/jqxgrid.selection.js"></script>
	<script type="text/javascript" src="./appcore/js/jqwidgets/jqxwindow.js"></script>
   	<script type="text/javascript" src="./appcore/js/jqwidgets/jqxtabs.js"></script>		 
	
	<link rel="stylesheet" href="./appcore/css/jqwidgets/styles/jqx.base.css" type="text/css" />
	<link rel="stylesheet" href="./appcore/css/jqwidgets/styles/jqx.classic.css" type="text/css" />
	</code> 

[matchday73Member]

<code>
<body>
   
	
	<div id="win_modals">
			   <div id="windowHeader"> <span> Tab Data</span></div>
                <div>
                <br> 
 				<br>
                   <div id="combo1"></div>
				   <br>
				   <br>
		                         <div id='tabdata'>
                                       <ul>
                                        <li>Tab 1</li>
                                        <li>Tab 2</li>
										<li>Tab 3</li>
										</ul>
 				   
				                              <div>
				            
				                              <table>
				                              <br>
											  <tr>
											  <td align="right">First Name:</td>
										      <td align="left"><div id="combo2"></div></td>
											  </tr>
											  </table>
				  
											  </div>
				   
											  <div>
				   
				 
											  </div>
				                     
											   <div>
				   
				   							  </div>
							  
							      </div>
		
                        </div>
 </div>
		
</body></code> 

[matchday73Member]

   <code>
<script type="text/javascript">
	
	
            $(document).ready(function () {
  
             // Initial theme 
             var theme = 'classic';
  
             var source =
            {
                 datatype: "json",
                 datafields: [
					 { name: 'EmployeeID'},
					 { name: 'FirstName'},
					 { name: 'LastName'},
					 { name: 'Title'},
					 { name: 'Address'},
					 { name: 'City'},
					 { name: 'Country'}
					
                ],
				id: 'EmployeeID',
                url: './appdb/data.php'
			   
            };
			
			
			// Initial  Interface
			
		 
        
			
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#combo1").jqxComboBox(
            {
                width: 200,
                height: 25,
                source: dataAdapter,
                theme: theme,
                selectedIndex: 0,
                displayMember: "FirstName",
                valueMember: "EmployeeId"
            });
            $("#combo1").bind('select', function (event) {
               
            });
           
           $("#combo2").jqxComboBox(
            {
                width: 200,
                height: 25,
                source: dataAdapter,
                theme: theme,
                selectedIndex: 0,
                displayMember: "FirstName",
                valueMember: "EmployeeId"
            });
            $("#combo2").bind('select', function (event) {
               
            });
              		
			  $('#tabdata').jqxTabs({ theme: theme , height: 250, width: 700, selectionTracker : true, animationType: 'fade'});	 
			  $('#win_modals').jqxWindow({ theme : theme,isModal: true, autoOpen:true,height: 500, width: 900});
			  		
			
				 
				
				
            });
			
	
        </script></code> 

[supportParticipant]

Hi matchday73,

I suppose that this issue has been resolved since jQWidgets 1.8, because I am unable to reproduce it with jQWidgets 2.0. The ComboBox was rendered correctly in my test app with the latest version of jQWidgets. So, as a solution I suggest you to download and update the version of jQWidgets that you use.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[matchday73Member]

Heloo Dear Peter

when i try use Jqwidgets 2.0 , and produce code tab case, thats right no problem, Combobox was rendered correctly , but still problen list text position when tab property selectionTracker : true, and animation type : ‘fade’ .

Best Regards,

MatchDay

[Peter StoevKeymaster]

Hi MathDay,

I’ve been able to reproduce it with the new information. The problem is caused because of the animations of the Tab. The issue will be resolved for jQWidgets 2.1. As a workaround, you can turn off the animations temporary.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts