Question

I’ve got a JQGrid that needs to scroll. It works fine in Firefox, but in IE6, the grid stays stationary while the rest of the content scrolls underneath it.

What might be a complicating factor is that the grid is inside tabs, inside a dialog.

I’ve googled all over the place, but I can’t find a solution for this problem, so I turn to Stackoverflow. Does anyone here know what could cause this behavior?

I’m using jqgrid 3.5.3, should that matter.

Answer 1

I had this same issue with IE6. it took me a while to fix but here is my solution, I hope it works for others.

You need to add 2 items to your pager section on the JQGrid where you define the add, edit, delete etc attributes.

1. scroll: 1 – This tells the dialog to scroll
2. afterShowForm: function(form) { form.css(“height”, “300px”); } – This fixes some draw issue with IE6 which again forces the dialog to scroll.

You need both of these together if you want the dialog to scroll and also remove any existing height attribute from the section too. You don’t have to create the form.css file, at least I didn’t, it just works as is.

        { add: false, edit: true, del: false, refresh: true, search: true }, //general options
        {
        //Options for the Edit Dialog
            editCaption: 'Edit Data',
        width: 500,
        modal: true,
        scroll: 1,
        closeAfterEdit: true,
        onclickSubmit: function(eparams) {
            var sr = jQuery("#MyGridTbl").getGridParam('selrow');
            var currentRow = jQuery("#MyGridTbl").getRowData(sr);
            return { Id: currentRow.Id };
        },
        afterShowForm: function(form) { form.css("height", "300px"); } 
    },
        {
        },
        {
        },
        {} //Search options
    );