Question

I have a jqGrid that has add/edit dialogs with a form that’s longer than the dialog height but the dialog won’t scroll. I’ve tried to add an overflow: auto style to the dialog but no effect:

$("div.ui-jqdialog-content").css("overflow", "auto");

Although, if I change auto to scroll, I at least see a scrollbar but still no scrolling:

$("div.ui-jqdialog-content").css("overflow", "scroll");

This at least gives me a small glimmer of hope that I’m on the right track.

There doesn’t seem to be any direction from the API documentation to support scrolling:

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing

Does anyone know how to add a working scrollbar to the jqModal dialog window used by jqGrid?

UPDATE

This is a total hack job but I got a scrollbar to appear and function doing the following:

setTimeout(function() {$("#FrmGrid_list").html('<div style="height: 300px; overflow: auto;">' + $("#FrmGrid_list").html() + '</div>');}, 1000);

I attached this to the afterShowForm event. However, this really doesn’t solve the problem because it causes other issues with other fields.

Answer 1

I thought I’d share my solution for others to reference.

The form element has a default height: auto; style property which causes the overflow: auto; not to function as desired. To make the overflow scroll, the height needs to be set to a fixed number to constrain the form container and therefore make the overflow necessary.

I attached a css update to the afterShowForm Form Editing event, using the following code:

afterShowForm: function(form) { form.css("height", "300px"); }

Mind you, 300px is an arbitrary number that I selected for testing. That number will be tweaked to fit my needs. It may even be dynamically adjusted on resizing. Who knows.

Also, using Firebug I found that my form id is FrmGrid_list. My grid id is list (e.g. <table id="list"></table> and jQuery("#list").jqGrid({...});). If your grid is named something other than list, the form id (above) should reflect that.

Reference link:

• http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing