Jqgrid search option hides the grid table

Question

The issue is when I click on search option (on pager) it shows the search window but the grid gets hide. I'm including the jqmodal.js file. But what I'm ignoring on the code below?

css files:

jqModal.css

jquery-ui-1.8.custom.css

ui.jqgrid.css

ui.multiselect.css

jquery.searchFilter.css

js files:

jquery.min.js

grid.base.js

grid.common.js

grid.formedit.js

grid.setcolumns.js

ui.multiselect.js

jquery.searchFilter.js

jqModal.js

The Javascript:

$("#list").jqGrid({
    url: 'foo_report.php?g=' + $('#fooselect').val() +
         '&report=1&searchString=null&searchField=null&searchOper=null',
    datatype: 'json',
    mtype: 'GET',
    colNames:['foo1','foo2', 'foo3'],
    colModel:[
        { name:'rows.foobar1', index: 'foobar1', search:true,
          jsonmap: 'foobar1', width: 150, align: 'left', sortable:true},
        { name:'rows.foobar2', index: 'foobar2', 
          jsonmap: 'foobar2', width: 150, align: 'left'},
        { name:'rows.foobar3', index: 'foobar3', 
          jsonmap: 'foobar3', width: 240, align: 'left', sortable: true}],
        pager: '#pager',
    rowNum: 8,
    autowidth: true,
    rowList: [8, 16],
    sortname: 'foobar1',
    sortorder: 'asc',
    viewrecords: true,
    search : { caption: "Search...", Find: "Find", Reset: "Reset",
               odata : ['equal', 'not equal', 'less'],
               groupOps: [ { op: "AND", text: "all" },
                           { op: "OR", text: "any" }],
               matchText: " match",
               rulesText: " rules" },
    caption: 'Foobar Data',
    jsonReader : { root: "rows",
                   repeatitems: false },
    height: 350,
    width: 800
});

html:

<table id="list"></table>
<div id="pager"></div>

Answer 1

This sounds like the same issue I had today. The search form would show up but would be on top of the grid and no modal window would show which rendered the screen useless.

If that is the case, all you have to do is reference jquery.searchFilter.css

On one of my projects it must be referenced in one of the code files but on the other project it wasn't referenced (which gave me the error). As soon as I added the css file to the page then this issue went away.

Hopefully that fixes your issue.

Answer 2

I had a custom CSS, I removed an overlay div and now is working, thanks.

Answer 3

Just want to share my fix for this particular problem.

I am using jQUery UI for my jQGrid. With the help of firebug, I saw where the problem came from. I commented the overlay in line 41 (which may differ to your version of ui) of "jquery-ui-1.8.4.custom.css" which says

.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

and everything works fine after that.