jQWidgets Forums

Forum Replies Created

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 15, 2017 at 1:29 pm in reply to: Position of tooltips in grids when using Chrome Position of tooltips in grids when using Chrome #93600

    michaelstegner
    Participant

    Hello,

    I Think if found the source of the issue. In jqxtooltip.js you are using document.documentElement.scrollTop to calculate the Tooltips position. The value is always 0 in Chrome.

    So to fixed the problem I replaced

    this.documentTop = document.documentElement.scrollTop,

    whit

    this.documentTop = (document.documentElement.scrollTop > 0 ? document.documentElement.scrollTop : (document.body.scrollTop > 0 ? document.body.scrollTop : window.pageYOffset ) ),

    I’m not sure if this is the best solution but the tooltips are no longer in the wrong position.
    I hope this will help you.

    May 12, 2017 at 3:52 pm in reply to: Position of tooltips in grids when using Chrome Position of tooltips in grids when using Chrome #93552

    michaelstegner
    Participant

    I’m sorry but this is not the solution to the problem. In the example the ‘position’ attribute is never set so the value is always ‘mouse’. But I should cut the part out to avoid irritation. I tried to dense my script down and avoid any unnecessary code.
    I also noticed the Problem only starts after you scrolled the window don a bit. As long as you are in the initially visible area there is no problem. So I added DIV-element you have to scroll past before the Grid gets visible.

    It works fine in Firefox and IE. It doesn’t in Chrome.

    <!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>
		<title>Test Grid</title>
		
		<link rel="stylesheet" href="/js/jqwidgets/styles/jqx.base.css?version=20170323" type="text/css" />

		<script type="text/javascript" src="/js/jqwidgets/jqxcore.js?version=20170323"></script>
		<script type="text/javascript" src="/js/jqwidgets/jqxdata.js?version=20170323"></script> 
		<script type="text/javascript" src="/js/jqwidgets/jqxbuttons.js?version=20170323"></script>
		<script type="text/javascript" src="/js/jqwidgets/jqxscrollbar.js?version=20170323"></script>
		<script type="text/javascript" src="/js/jqwidgets/jqxmenu.js?version=20170323"></script>
		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.js?version=20170323"></script>
		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.sort.js?version=20170323"></script> 
		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.filter.js?version=20170323"></script> 
		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.pager.js?version=20170323"></script> 
		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.columnsresize.js?version=20170323"></script> 
		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.edit.js?version=20170323"></script> 
		<script type="text/javascript" src="/js/jqwidgets/jqxgrid.selection.js?version=20170323"></script> 
		<script type="text/javascript" src="/js/jqwidgets/jqxtooltip.js?version=20170323"></script>
		<script type="text/javascript" src="/js/jqwidgets/globalization/globalize.js?version=20170323"></script>
		<script type="text/javascript" src="/js/jqwidgets/localization.js?version=20170323"></script>	
		<script type="text/javascript" src="/js/jqwidgets/jqxnavigationbar.js?version=20170323"></script>
		<script type="text/javascript">
		
        $(document).ready(function () {
            // Just some demo Data
            var data = new Array();

			var row = {};
			row["firstname"] = 'Andrew';
			row["lastname"] = 'Fuller';
			data[0] = row;
			var row = {};
			row["firstname"] = 'Nancy';
			row["lastname"] = 'Burke';
			data[1] = row;
			var row = {};
			row["firstname"] = 'Shelley';
			row["lastname"] = 'Murphy';
			data[2] = row;
			var row = {};
			row["firstname"] = 'Andrew';
			row["lastname"] = 'Murphy';
			data[3] = row;
			var row = {};
			row["firstname"] = 'Nancy';
			row["lastname"] = 'Fuller';
			data[4] = row;
			var row = {};
			row["firstname"] = 'Shelley';
			row["lastname"] = 'Burke';
			data[5] = row;
			
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },

                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
			
			// Render the rowdetails
			var initrowdetails = function (index, parentElement, gridElement, datarecord) {

			
                tabsdiv = $($(parentElement).children()[0]);
				
                if (tabsdiv != null) {			
					
					
					information = tabsdiv.find('.information');
					// just some Text so there is a little bit of content
					$(information).html('Some Text   <br /><br />'+
					' <br /> <table><tr><td>table </td>  <td>to</td> </tr><tr><td>show </td>  <td>stuff</td> </tr></table> <br />'+
					// this is the DIV that gets the tooltip
					'<div class="widget-info" id="widget-info-test-'+index+'">Move mouse here to show tooltip</div><span id="widget-info-content-test-'+index+'" style="display: none; visibility: hidden;"> hello world '+index+'</span>'); 

					// Add tooltip
					var element = $('#widget-info-test-'+index);
					var tagID = element[0].id;
					var uuid = tagID.replace("widget-info-","");
					var content = $('#widget-info-content-'+uuid).html();
					var left = false;
					var position = 'mouse'; // postion is always mouse

					$(element).jqxTooltip({ content: content, position: position, name: tagID, left: left, width: 400});

				
				}
				var position = $('#jqxgrid').jqxGrid('scrollposition');	
				$('#jqxgrid').jqxGrid('scrolloffset', position.top+200 , position.left);
				
				//$("#"+$('#jqxgrid').jqGrid('getGridParam','selrow')).focus();	
			}
			
			
            $("#jqxgrid").jqxGrid(
            {	
                width: 850,
				autoheight : true,
                source: dataAdapter,
                rowdetails: true,
				rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><div class='information'></div></div>", rowdetailsheight: 250 },
				initrowdetails: initrowdetails,
				localization: getLocalization('de'),
                columns: [
						{ text: 'Firstname', datafield: 'firstname', width: 400  },
						{ text: 'Lastname', datafield: 'lastname', width: 400  },

					],
					ready: function() {
							$("#jqxgrid").jqxGrid('showrowdetails', 0);
					}

			});

		});
		
		
		</script>

	</head>
	<body>
		<div style="height : 1000px; border: solid red 1px;">
			A big DIV to force you to scroll down <br />
			Grid is below 
		</div>
		<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
			<div id="jqxgrid"></div>
		</div>	
	
	</body>
</html>
  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)