Forum
Log In
Home
Topic RSS
19:33
17/06/2009
Offline
I setup my grid to use the scroll bar for paging instead of a regular pager and while I do now get a vertical scrollbar, I also get a horizontal scrollbar. Is there any way to avoid this? Doesn't matter how wide I make my grid based on the columns, it's like the space needed for the scroll bar is being taken away from the columns instead of added on to them.
12:49
Moderators
30/10/2007
Offline
Hello,
Difficult to understand what you mean
Also post here you code.
Maybe you will need to set shrinkToFit to true in grid options
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
07:16
17/06/2009
Offline
When I look at the scroll demo, it looks like the vertical scrollbar is getting it's own distinct part of the header bar. In my case, the vertical scrollbar is sharing space with the last column and I think this is causing the horz scroll bar to appear.
00:56
Moderators
30/10/2007
Offline
Hello,
Look in the Changes.txt. You can adjust the scrollOffset parameter. Also in which browser is this?
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
03:31
Dear Tony,
I have the same problem while using Firefox 3.5. I tried to adjust scrollOffset in both directions (i.e. set it higher and lower than 18), but the situation seemed getting worse (the horizontal scroll bar shortened in both cases). I tried to set the width of grid and check the difference. I found the horizontal scroll bar will not appear if I set the grid width to:
total of widths in colModel
+ number of columns + 1 (for grid lines)
+ 18 (width of vertical scroll bar)
+ 2 (grid border)
The horizontal scroll bar does not appear in IE 8 without setting grid width.
Best regards,
Rayson
23:54
Moderators
30/10/2007
Offline
Hello,
In order to resolve the problem, please post your code.
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
02:43
Dear Tony,
It seems the column width was adjusted (when shrinkToFit: true) without considering the width of vertical scroll bar. The horizontal scroll bar appears when I set height to 30% or when I set height to 80% and shrinkToFit to false. Below code I used to reproduce the problem in Firefox.
jQuery("#lists2").jqGrid({
datatype: "local",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80, align:"right", formatter: 'number'},
{name:'tax',index:'tax', width:80, align:"right", formatter: 'number'},
{name:'total',index:'total', width:80,align:"right", formatter: 'number'},
{name:'note',index:'note', width:150, sortable:false}
],
height: '30%',
//height: '80%',
//shrinkToFit: false,
rowNum:10,
rowList:[10,20,30],
scroll: true,
pager: jQuery('#pagers2'),
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption:"JSON Example",
multiselect: false
}).navGrid('#pagers2',{edit:false,add:false,del:false});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#lists2").addRowData(i+1,mydata[i]);
Best regards,
Rayson
03:03
Moderators
30/10/2007
Offline
Hello,
Right now I understand. Also If setting shrinkToFit to false it is a good idea to set a grid width. The purpose of shrinkToFit option is:
If set to false – all the column have the setted width following the rules:
I. If the grid width is set then
I.1. if the width is less than the sum of visible column width – the grid have horizontall scrolbar
I.2 if the width is greater than the sum of visible column width – you will not have horizontall scrollbar
II. If the gridwidth is not set
1. You will have allway horizontall scrollbar – since the calculated width of grid does not include the borders and padding of the cells.
Recommendation: when shrinkToFit is set to false it is good idea to set the grid width (that is the main reasoin for this option)
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
04:34
In the sample code, when height: '30%', with default settings (shrinkToFit:true and grid width not set), the horizontal scroll bar still appears. I think the calculation of grid width did missed something.
04:52
Moderators
30/10/2007
Offline
Hello,
This example - as your post work as expected in my demo- no scrollbars. Also check your style.
Recommendation - in the html page use only the grid and ui.jqgrid.css and nothing more. See the result.
I thing that other css setting causes the problem - or at least download the demo and experiment with these options to see what is.
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
04:39
Dear Tony,
I just used the sample for testing with nothing else, here is my header:
<html>
<head>
<META HTTP-EQUIV="expires" CONTENT=0>
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<script type="text/javascript" src="js/min/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/min/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="js/min/jquery.jqGrid.min.js"></script>
I tried removing "jquery-ui-1.7.2.custom.css" but still have the horiztontal scroll bar. I believe there are some problem in auto column width adjustment. By the way, I'm using Firefox 3.5 for testing on this problem.
Best regards,
Rayson
05:16
Moderators
30/10/2007
Offline
Hello,
You missed a DOCTYPE declaration.
More you can find here:
http://www.trirand.com/jqgridw.....to_install
Reagrds
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
68 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
