jqGrid horizontal scrollbar

问题

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

回答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.

回答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.

回答3:

Set an explicit width on the grid and use

autowidth: false,
shrinkToFit: true

回答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.

回答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

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

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

回答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.

回答9:

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

回答10:

Its simple, use in the jqgrid shrinkToFit: false

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

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

回答13:

This works for me

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

来源：https://stackoverflow.com/questions/3091200/jqgrid-horizontal-scrollbar