jqGrid horizontal scrollbar

Question

I developed AJAX interface with jQuery and jqGrid.

How I can remove horizontal scrollbar from my jqGrid table?

If I set autowidth: true, then I get width of table = sum width of columns, but I need width of table = width of parent element with id returned by function getSelectedTabHref()

so I make function:

$(window).bind('resize', function() {
  $('#tasks').setGridWidth($(getSelectedTabHref()).width());
  $('#tasks').setGridHeight($(window).height()-190);
}).trigger('resize');

and here is how I create jqGrid table:

$('#tasks').jqGrid({
  datatype: 'local',
  colNames:[labels['tasksNum'],labels['tasksAdded']+"/"+labels['tasksAccepted'],labels['tasksOperator'],labels['tasksClient'],labels['tasksManager'],labels['tasksDesc']],
  colModel :[
    {name:'taskId', index:'taskId', width:1, align:'right'},
    {name:'taskAdded', index:'taskAdded', width:3},
    {name:'taskOperator', index:'taskOperator', width:4},
    {name:'taskClient', index:'taskClient', width:7},
    {name:'taskManager', index:'taskManager', width:4},
    {name:'taskDesc', index:'taskDesc', width:8}]
});

score 76 · Answer 1 · edited Jul 28 '11 at 13:08

76

i adjusted ui.grid.css because i did not need a horizontal scrollbar at all. i did this:

.ui-jqgrid .ui-jqgrid-bdiv {
  position: relative; 
  margin: 0em; 
  padding:0; 
  /*overflow: auto;*/ 
  overflow-x:hidden; 
  overflow-y:auto; 
  text-align:left;
}

the commented was how it was, i just used overflow-x to hide the horizontal scrollbar and now all is fine with me.

edited Jul 28 '11 at 13:08

Matthieu

4,605
4
40
60

answered Feb 08 '11 at 14:59

Herman van der Blom

761
5
3

why this question isnt first? it has 26 votes, and works perfectly! thank you! – Paschalis Aug 01 '12 at 01:35
8

the scroll bar is hidden, but at the same time, part of the last column is also invisible. – Will Wu Dec 06 '12 at 10:03
1

I have the same issue as @WillWu, It works for me to add the right-border back ` .ui-jqgrid .ui-jqgrid-bdiv { position: relative; margin: 0em; padding:0; /*overflow: auto;*/ overflow-x:hidden; overflow-y:auto; text-align:left; border-right: 1px solid #dddddd;}` – leoh Feb 04 '15 at 17:51

score 5 · Answer 2 · edited May 23 '17 at 11:47

There are some situations where jqGrid calculate the grid width incorrect. You can try to increase cellLayout parameter (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). This may be needed if you change some CSS from jqGrid.

In some other situations you can correct the width with respect of the function fixGridWidth or fixGridSize which I have described in Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog. Don't forget, that you should use it inside of loadComplete.

score 4 · Answer 3 · answered Mar 09 '11 at 21:18

4

Set an explicit width on the grid and use

autowidth: false,
shrinkToFit: true

answered Mar 09 '11 at 21:18

arviman

5,087
41
48

This solution is not working in every situation. Changing the css does the trick. – Matthieu Jul 28 '11 at 12:37

score 1 · Answer 4 · edited Aug 02 '13 at 06:01

1

Here we go width : '1083', shrinkToFit:false,

When we set the above we need to make sure that our ui.jqgird.css are set as below

.ui-jqgrid .ui-jqgrid-bdiv { height: auto; margin: 0em; max-height: 250px; overflow-x: auto; overflow-y: auto; padding: 0px; position: relative; text-align: left; }

edited Aug 02 '13 at 06:01

Hardik Mishra

14,779
9
61
96

answered May 28 '13 at 04:10

kiran vennampelli

13
3

score 1 · Answer 5 · answered Jan 22 '14 at 12:18

1

Its simple, use in the jqgrid shrinkToFit: false

answered Jan 22 '14 at 12:18

cavalsilva

193
13

score 1 · Answer 6 · edited May 23 '17 at 10:29

setGridWidth will definitely resize your grid to that of the given new width, but make sure you use it with autowidth=true. setGridWidth may have problem with IE 7 or so.

Some working solutions discussed here (in case if you are yet to find a solution),

Resize jqGrid when browser is resized?

http://www.trirand.com/blog/?page_id=393/discussion/browser-resize-how-to-resize-jqgrid/

----old----

There are couple of options you can try,

From http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

"autowidth" : true

or

"shrinkToFit": false

Otherwise post your jqgrid code, let us analyze.

score 1 · Answer 7 · answered Feb 13 '19 at 09:59

1

Add the below script to your style.css will resolve your issue.

.ui-jqgrid .ui-jqgrid-bdiv {
    overflow-x:hidden !important; 
    overflow-y:auto !important;
}

answered Feb 13 '19 at 09:59

Hari Prasad Ranganathan

27
5

score 1 · Answer 8 · answered Oct 09 '19 at 12:00

1

This works for me

 <style type="text/css">
    .ui-jqgrid-bdiv {
        overflow-x: hidden !important;
    }
 </style>

answered Oct 09 '19 at 12:00

emon

1,629
1
17
18

score 1 · Answer 9 · answered Feb 07 '12 at 14:08

1

a bit late, but might be useful for someone

You must set the height of the table only in numbers, without 'px' at the end

answered Feb 07 '12 at 14:08

Agustin Baez

371
3
4

score 0 · Answer 10 · edited Oct 20 '12 at 20:53

0

Apply AppearanceSettings ShrinkToFit="False" and AutoWidth="true" to your jqGrid.

edited Oct 20 '12 at 20:53

Thunraz

570
5
18

answered Jun 01 '12 at 06:08

Ankit Gupta

1

Chris · Answer 11 · 2018-07-17T15:39:40.373

Here is how I did it and so far, so good. Basically, we resize the grid to accommodate the vertical scroll bar and by resizing, there is no horizontal overflow and therefore, the horizontal bar never shows up. Our cell sizing remains the same and the last cell is not partially hidden.

loadComplete: function (data) {
                //set our "ALL" select option to the actual number of found records
                $(".ui-pg-selbox option[value='ALL']").val(data.records);
                if ($(".ui-jqgrid").height() > $('#grid').getGridParam('maxHeight')) {
                    //resize our grid for the vertical scroll bar to eliminate the hortizontal scroll bar
                    $(".ui-jqgrid").css("width", $('#grid').getGridParam('width') + 20);
                    $(".ui-jqgrid-bdiv").css("width", $('#grid').getGridParam('width') + 17);
                    $(".ui-jqgrid-hdiv").css("width", $('#grid').getGridParam('width') + 20);
                    $(".ui-jqgrid-view").css("width", $('#grid').getGridParam('width') + 20);
                    $("#pager").css("width", $('#grid').getGridParam('width') + 20);
                    $(".ui-jqgrid-hbox").css("padding-right", "16px");
                } else { //set everything to defaults
                    $(".ui-jqgrid").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-bdiv").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-hdiv").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-view").css("width", $('#grid').getGridParam('width'));
                    $("#pager").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-hbox").css("padding-right", "0px");
                }
}

score 0 · Answer 12 · edited Jan 01 '12 at 17:20

0

i used jqgrid API method setGridHeight. it works fine for me in IE 8 also.

var gr = jq('#grid');
gr.setGridHeight(350,true);

i put this lines under 'loadComplete' function call.

edited Jan 01 '12 at 17:20

answered Mar 10 '11 at 21:52

Sam

2,055
6
31
48

score 0 · Answer 13 · answered Jun 20 '19 at 03:56

0

I adjust this type of CSS in my jqgrid

.ui-jqgrid .ui-jqgrid-bdiv {
 position: relative;
 margin: 0;
 padding: 0;
 overflow: auto;
 text-align: left;
}

answered Jun 20 '19 at 03:56

Foram

483
5
12

jqGrid horizontal scrollbar

13 Answers13

Linked