jqgrid scrollable dialog

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

Your problem sounds strange. Every edit/add dialog has already a scrollable form with the name "FormPost" inside. This form has following style:

position: relative; width: 100%; height: auto; overflow: auto;

I just tested one jqGrid with a lot of controls and can scroll there without any problem.

The reason of the strange behavior which you have is probably that you either forget to include optional jqModal.js and jqDnR.js (see the same http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing page at the beginning) or use the wrong path to the files, so they will be not loaded.

Answer 2

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