How to get rid of horizontal scroll bar when not needed

Question

I have jqGrid with two columns, one being hidden. For some reason in FireFox it shows a horizontal scroll bar like below:

as soon as i set the second column to show the scroll bar goes away like below:

In IE this displays in the same manner accept that a vertical scroll is added to the first image. Think this has to do with the horizontal bar. If someone knows how to get rid of the horizontal bar without setting the height of the grid to anything other than 'auto' please let me know.

my jqGrid setup script:

grid.jqGrid({
    url: "/Availability/GetData",
    colNames: ['row_id', 'Availability'],
    colModel: [
        { name: 'row_id', index: 'row_id', width: 20, hidden: false, search: false, editable: true, editoptions: { readonly: true, size: 10 }, formoptions: { rowpos: 1, label: "Id", elmprefix: "(*)"} },
        { name: 'AVAILABILITY', index: 'AVAILABILITY', width: 75, sortable: true, hidden: false, editable: true, editoptions: { size: 20, maxlength: 20 }, formoptions: { rowpos: 2, label: "Availability", elmprefix: "<span class='jqgridrequired'>*</span>" }, editrules: { required: true} }
        ],
    pager: pager,
    datatype: 'json',
    imgpath: '/Scripts/jqGrid/themes/redmond/images',
    jsonReader: {
        root: "Rows",
        page: "Page",
        total: "Total",
        records: "Records",
        repeatitems: false,
        userdata: "UserData",
        id: "row_id"
    },
    loadtext: 'Loading Data...',
    loadui: "enable",
    mtype: 'GET',
    rowNum: 10,
    rowList: [10, 20, 50],
    viewrecords: true,
    multiselect: false,
    sortorder: "asc",
    height: 'auto',
    autowidth: true,
    sortname: 'AVAILABILITY',
    caption: 'Existing Availabilities'
}).navGrid('#pager', { view: false, del: true, add: true, edit: true, search: false },
           { height: 150, reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, bottominfo: "Fields marked with (<span class='jqgridrequired'>*</span>) are required", closeAfterEdit: true, url: "/Availability/Edit", savekey: [true, 13], navkeys: [true, 38, 40], afterSubmit: processAddEdit }, // default settings for edit
           {height: 150, reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, bottominfo: "Fields marked with (<span class='jqgridrequired'>*</span>) are required", closeAfterAdd: true, url: "/Availability/Create", savekey: [true, 13], navkeys: [true, 38, 40], afterSubmit: processAddEdit }, // default settings for add
           {reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, url: "/Availability/Delete" }, // delete instead that del:false we need this
           {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
           {} //{height: 150, jqModal: false, closeOnEscape: true} /* view parameters*/
 );
enter code here

As you can see i am using the height: 'auto' so that when the user selects a much higher page count it will span down. I don't have this problem on other jgGrids which are displaying multiple columns. Only jgGrids that have one column shown.

Solution 1

I tried to reproduce your problem with this and this examples, but I have not the effect which you described. The width of the grid will be correct calculated.

Probably the problem is in other CSS styles which you use. You can post the full code with the test JSON data which reproduce the problem.

Solution 2

I got perfect Solution finally. I also tried to overcome the problem of horizontal scrollbar issue. Tried diferently in Jquery much time. But the problem is in CSS. In ui-jqgrid.css the table layout is in Fixed. Make it as auto it will work perfectly. I just copied the same class i.e.,

.ui-jqgrid .ui-jqgrid-btable
{
  table-layout:auto;
}  /* THIS CODE WILL WORK PERFECTLY BEFORE IT WAS IN 'FIXED' VALUE IN THEIR CSS */

Solution 3

Looks like this problem may be back. Chrome release v21 on 7/31, and I suddenly started getting the horizontal scrollbar. I am using jqGrid v4.4.0, and a search of the non-minimized code for "webkit" didn't yield any results, so I wasn't able to try Oleg's fix.

After a little trial and error, a combination of Oleg's solution here and user1479471's solution worked for me:

div.ui-jqgrid-view table.ui-jqgrid-btable {
  table-layout:auto;
}

div.ui-jqgrid-view table.ui-jqgrid-htable {
  table-layout:auto;
}

Comments

[Billy Logan]

You were exactly right. i had a style for table and td which set a border as well as the border-collapse. Should have seen that. Thank you for your time!

[Oleg]

@Sarath: The answer is now very old and is about horizontal bars in Firefox. In my tests the demos has no horizontal bars in Firefox 13.0.1 and IE9. If you use Google Chrome you have to update the usage of jqGrid 3.8.2 to the current 4.4.0 because of the problem described here. For example the demo is the same as the first one, but uses jqGrid 4.4.0. It has now no horizontal bars in the Google Chrome 20.

[Sarath]

@Oleg Thanks for pointing me in the right direction. My problem is fixed.