jqGrid horizontal scrollbar

Question

I developed AJAX interface with jQuery and jqGrid.

How I can remove horizontal scrollbar from my jqGrid table?

http://dskarataev.ru/jqgrid.png

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}]
});

Answer 1

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.

Answer 2

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.

Answer 3

Set an explicit width on the grid and use

autowidth: false,
shrinkToFit: true

Answer 4

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.

Answer 5

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

Answer 6

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; }

Answer 7

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;
}

Answer 8

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.

Answer 9

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

Answer 10

Its simple, use in the jqgrid shrinkToFit: false

Answer 11

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");
                }
}

Answer 12

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;
}