jqGrid horizontal scrollbar
Solution 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.
Solution 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
.
Solution 3
Set an explicit width
on the grid and use
autowidth: false,
shrinkToFit: true
Solution 4
Its simple, use in the jqgrid shrinkToFit: false
Solution 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
dskarataev
Product and platform development for high-load, large-scale, distributed systems.
Updated on October 10, 2020Comments
-
dskarataev over 3 years
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 functiongetSelectedTabHref()
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}] });