How to make JQGrid scroll properly in IE6?

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

Why build in functionality for a browser that was released in 2001 (9 years old!) and isn't even supported by their creators anymore? I know they officially "support" IE 6 up until 2014 but due to the lack of support for webstandards and newer technologies, I'd advice your project visitors to upgrade their system. (because besides the lack of support for modern web candy, it's just a buggy and insecure browser)

Answer 2

I have this problem too - and unfortunately likewise IE6 cannot be avoided (at least for now, anyway).

Have you figured out how to fix the problem?

Answer 3

I have the same problem with IE6 - and unfortunately likewise IE6 cannot be avoided (at least for now, anyway).

Have you figured out how to fix the problem?

Answer 4

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

Answer 5

Hi,

I have had similar problem. My grid was inside a div. And this div had vertical scrollbar. My problem was that when I scrolled the div the grid remained static. Took me some time to figure out that the it was the div positioning which spoiled the grid position. Changed the div's position to relative and it scrolls as it should. Anyway just thought I share as I find this forum very (!) useful.

Thanks, Tomasz