how to add scrollbars to jqgrid view window and restrict its height

Question

If table contains big multi-line text column, pressing jqgrid view toolbar button creates view window with big height and without scrollbar. Most of data is outside screen and is not visible.

I tried to add scrollbars and restrict its height using

jQuery.extend(jQuery.jgrid.view, {
   savekey: [true, 13],
   recreateForm: true,
   closeOnEscape: true,
   dataheight: screen.height-230,
   height: 0.82* screen.height,
   width: 0.96*screen.width,
   top:5
     });

but those settings are ignored ( they work for edit window only if jQuery.jgrid.edit is used).

How to add scrollbar(s) and retrict view window height if it contains more data than fits to screen ?

Mcmullen

Answer 1

I suggest to get the demo from the answer and extend the code a little. In the method beforeShowForm I suggest to include additional line

$(this).children("span").css({
    overflow: "auto",
    "text-align": "inherit", // overwrite 'text-align: "right"' if exist
    display: "inline-block",
    "max-height": "100px"
});

You can see the results on the demo. The height of the View form will be variable, but the maximal height of every field will be restricted to 100px (see max-height above):

or

Macneil

Thank you. In my case multiline text column width is big. In this case textarea right scrollbar in view form is not visible. How to increase view window width and maybe decrease textarea width so that textarea right vertical scrolbar is always visible? – Mcmullen

@Andrus: You can add something like "max-width": "300px" or "width": "300px" to the list of CSS option which you set for $(this).children("span"). – Macneil

I found that specifying view window dimensions in navGrid view parameters worked. Your proposed style removes line breaks from textaarea. I havent seen any differences in layout with or without this style. I didnt added this style and beforeShowform to application. Anyway I think your answer was great, I marked and upvoted it. Thank you very much for help. – Mcmullen

height: 0.82*screen.height shows full size window always which looks ugly for small amout of data, so max height of whole window should still restricted. I posted it as separate queston in #8419050 – Mcmullen