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

Ipomoea

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.

Syllabize

why this question isnt first? it has 26 votes, and works perfectly! thank you! – Beilul

the scroll bar is hidden, but at the same time, part of the last column is also invisible. – Dag

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;}` – Steatopygia

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.

Renz

Answer 3

Set an explicit width on the grid and use

autowidth: false,
shrinkToFit: true

Superscription

This solution is not working in every situation. Changing the css does the trick. – Fledgy

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.

Rebeccarebecka

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

Basically

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

Antimatter

Answer 7

Its simple, use in the jqgrid shrinkToFit: false

Wallace

Answer 8

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

Noam

Answer 9

This works for me

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

Chabot

Answer 10

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.

Feriga

Answer 11

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

Lat

Answer 12

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

Baum

Answer 13

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

Nosegay