jQuery Grid Plugin - jqGrid - Topic: Scroll option causs horz scroll bar to appear

Rayson on Scroll option causs horz scroll bar to appear

Mon, 10 Aug 2009 21:48:16 +0300

Dear Tony,

You are right, the DOCTYPE definition really fixed it. Thanks a lot!

Best regards,

Rayson

tony on Scroll option causs horz scroll bar to appear

Mon, 10 Aug 2009 05:16:19 +0300

Hello,

You missed a DOCTYPE declaration.

More you can find here:

http://www.trirand.com/jqgridw.....to_install

Reagrds

Tony

Rayson on Scroll option causs horz scroll bar to appear

Mon, 10 Aug 2009 04:39:34 +0300

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

tony on Scroll option causs horz scroll bar to appear

Fri, 07 Aug 2009 04:52:13 +0300

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.

Rayson on Scroll option causs horz scroll bar to appear

Fri, 07 Aug 2009 04:34:16 +0300

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.

tony on Scroll option causs horz scroll bar to appear

Fri, 07 Aug 2009 03:03:59 +0300

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

Rayson on Scroll option causs horz scroll bar to appear

Fri, 07 Aug 2009 02:43:50 +0300

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

tony on Scroll option causs horz scroll bar to appear

Thu, 06 Aug 2009 23:54:24 +0300

Hello,

In order to resolve the problem, please post your code.

Regards

Tony

Rayson on Scroll option causs horz scroll bar to appear

Thu, 06 Aug 2009 03:31:46 +0300

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

tony on Scroll option causs horz scroll bar to appear

Thu, 16 Jul 2009 00:56:31 +0300

Hello,

Look in the Changes.txt. You can adjust the scrollOffset parameter. Also in which browser is this?

Regards

Tony

happyfirst on Scroll option causs horz scroll bar to appear

Wed, 15 Jul 2009 07:16:30 +0300

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.

tony on Scroll option causs horz scroll bar to appear

Tue, 14 Jul 2009 12:49:31 +0300

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

happyfirst on Scroll option causs horz scroll bar to appear

Mon, 13 Jul 2009 19:33:36 +0300

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.