Problem with horizontal scrollbar - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: column, grid, Header, horizontal, jqxgrid, scrollbar

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 11 years, 1 month ago.

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

Author

Problem with horizontal scrollbar Posts

October 29, 2013 at 9:17 am Problem with horizontal scrollbar #31512

Member

Hi
FOA: Thanks for such an amazing product
Second: I searched all the forum for this problem but non have the same problem. I followed your examples for making a grid. but from start I have this problem that

Horizontal scroll bar don’t appear

even when number of columns are more than the space (I use 100% for width). The awkward behavior is that sometimes the scroll bars appears but only scroll the header columns(see the image)

This is my html and javascript

<div id="company_grid" name="company_grid" style="height: 100%; width: 100%;"></div>

and this is my Javascript

//Grid Intialization and adjustments

grid: function(datafields, columns)
{
	var source = {
			datatype: "json",
			datafields: datafields,
			url: $('#company_grid_url').val()
		};
	var company_grid = $("#company_grid").jqxGrid({
					source: source,
					theme: 'bootstrap',
					width: '100%',
					height: '100%',
					scrollmode: 'logical',
					rowsheight: 35,
					columnsheight: 35,
					rtl: true,
					altrows: true,
					showdefaultloadelement: false,
					columnsresize: true,
					sortable: true,
					filterable: true,
					columns: columns
				});
	// Actions when the binding is complete
	company_grid.on("bindingcomplete", function (event){
					company_grid.jqxGrid('autoresizecolumns', 'all');// Resize all columns based on cells and columns headers
				});
}

Thanks in advance

October 29, 2013 at 11:04 am Problem with horizontal scrollbar #31525

Dimitar

Participant

Hello sobhanattar,

We were not able to reproduce the reported issue. Please make sure you are using the latest version of jQWidgets (3.0.3).

Best Regards,
Dimitar

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

October 29, 2013 at 11:08 am Problem with horizontal scrollbar #31526

sobhanattar

Member

Hi,
I’m using the latest version,
As this issue is really preventing us from using jqwidgets, please let me know what other information is required so I provide them for you to solve the issue.

Thanks in advance

October 29, 2013 at 11:46 am Problem with horizontal scrollbar #31531

Dimitar

Participant

Hi sobhanattar,

Please provide us with a complete example which we may run directly and test for the reported issue.

Best Regards,
Dimitar

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

October 29, 2013 at 12:19 pm Problem with horizontal scrollbar #31532

sobhanattar

Member

Hi
This is my complete code which is come from one of your own examples. As you see in this image, when the width is 640 the behavior of scroll bar and grid is not as it should. For example the grid show only 5 columns while I have 6 columns. Another thing is that you can’t see no data label until you scroll and then it appears

here is my complete code

<!DOCTYPE html>
<html lang="fa">
<head>
<link rel="stylesheet" type="text/css" href="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/styles/jqx.bootstrap.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/styles/jqx.base.css" />
	
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/globalization/globalize.culture.fa-IR.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxdata.export.js"></script>
<script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript">
$(document).ready(function () {
			var source = {
							datatype: "json",
							datafields: [
											{ name: 'ShippedDate' },
											{ name: 'Freight' },
											{ name: 'ShipName' },
											{ name: 'ShipAddress'},
											{ name: 'ShipCity'},
											{ name: 'ShipCountry'}
										],
							};
			$("#grid").jqxGrid({
									source: source,
									//theme: 'bootstrap',
									width: 640,
									height: 450,
									//scrollmode: 'logical',
									//rowsheight: 35,
									//columnsheight: 35,
									//rtl: true,
									//altrows: true,
									//showdefaultloadelement: false,
									//columnsresize: true,
									//sortable: true,
									//filterable: true,
									columns: [
												  { text: 'Ship Name',  datafield: 'ShipName', width: 250},
												  { text: 'Shipped Date', datafield: 'ShippedDate', width: 250},
												  { text: 'Freight', datafield: 'Freight', width: 250},
												  { text: 'Ship Address', datafield: 'ShipAddress', width: 50},
												  { text: 'Ship City', datafield: 'ShipCity', width: 50},
												  { text: 'Ship Country', datafield: 'ShipCountry', width: 50}
											]
								});
			
        });
</script>
</head>
<body class='default'>
        <div style="float: left;" id="grid">
		</div>
</body>
</html>

Thanks in advance

October 30, 2013 at 7:05 am Problem with horizontal scrollbar #31587

Dimitar

Participant

Hello sobhanattar,

We tested your example, but everything works as expected at our side – the grid shows all 6 columns and the “No data to display” label is shown always in the middle. The version we used for testing is 3.0.3 and the browsers we tested on are Internet Explorer 9 and the latest versions of Google Chrome and Firefox.

Please make sure you are using version 3.0.3 and that none of the source files is modified in any way.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.