0

jqGrid contains textareas with lot of lines. Edit and view window height is too big in this case . Those windows are rendered out of screen, bottom rows are not visible.

How to restrict those window heights so that they always fit to screen and force scrollbars to appear in nessecary ?

Answers which I found restrict textarea height but I'm looking for a way to restrict whole window height and force scrollbars in while window to appear if nessecary.

I tried

jQuery.extend(jQuery.jgrid.edit, {
  maxheight: 0.82* screen.height,
  dataheight: height-60
  } );

jQuery.extend(jQuery.jgrid.view, {
  maxheight: 0.82* screen.height,
  dataheight: height-60
  } );

but this does not restrict max height.

Andrus
  • 26,339
  • 60
  • 204
  • 378

1 Answers1

2

It seems to me that setting of "max-height" on the form should solve the problem:

beforeShowForm: function ($form) {
    $form.css({"max-height": 0.70*screen.height+"px"});
}

See the demo. Because I don't have so many columns of the type 'textarea' I just set the height of one column to large value to verify the max-height of form, which you need. In the way I can't test the height of small edit form, but the height of view form independent on the setting.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thank you very much. It works OK in most tables. In one table in view form every click inside textarea and in some other places in IE9 increas form height (FireFox does not have this issue). Also style used in your sample removes line ends from textarea lines. – Andrus Dec 07 '11 at 21:36
  • 1
    @Andrus: The problem in IE9 seems like the IE but which I described [here](http://www.trirand.com/blog/?page_id=393/bugs/heightauto-works-wrong-in-ie-height100-works-correct/#p22557). It can be fixed if you replace `height: "auto"` style to `height: "100%"`. The problem is that you should do this dynamically, I think in `beforeShowForm`. And I can't say you exactly at *which* HTML element you should do the changes because I don't seen the described problem. – Oleg Dec 07 '11 at 22:56
  • Thank you. According to Tony reply in your link this is fixed. I dont know exactly what to change. I can try to create url which can used to reproduce the issue if you are interested. – Andrus Dec 08 '11 at 09:22
  • how to force view and edit windows to be centered vertically in browser window? Currently `Top:5` parameter is used which puts windows to fixed position. Window heights can be different so using hard coded Top value is not possible. – Andrus Dec 08 '11 at 09:44
  • 1
    @Andrus: You can use different approaches to implement this. Moreover you should don't forget about another problem where you have long grid with many row and if you scroll down and then click Delete/Add or Edit button the corresponding form will be created *on top* or the page, so the user can be need to scroll back to the top of the page to see the dialog form. Look at tree old answers: [this](http://stackoverflow.com/a/3968981/315935), [this](http://stackoverflow.com/a/5720456/315935) and [this](http://stackoverflow.com/a/7236822/315935). You can modify the demos to your requirements. – Oleg Dec 08 '11 at 09:56
  • I tried solution in first link. If form height increases, it moves out of screen. I added comment to this. Remaining two cover delete dialog centering. I have found IE9 height increase on click annoyning. It looks like form height is not set properly at first time and every click tries to set it incresing height. After some clicks form buttons move out of screen and are not accessible anymore. Should I add additonal question about this? – Andrus Dec 08 '11 at 15:17