All geek questions in one place

How to prevent an increase in the height of the form with every click in Internet Explorer 9 in jqGrid

In IE9, each click at a specific location in the form increases the height of the form. I used the Oleg jqGrid sample to create a test file.

Steps to play:

  • Open the page below in Internet Explorer 9
  • Clicking on the first line in the text “Clicking me increases the height of the form” so that it turns yellow.
  • click on the record button in the lower left corner.
  • click on the button "push me, increasing the height of the form" in the form

Observed

Each click increases the height of the form in Internet Explorer 9. How to fix this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>how to center jqGrid popup modal window?</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.jqgrid.css" /> <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/jquery.searchFilter.css" /> <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.multiselect.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/ui.multiselect.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/i18n/grid.locale-en.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.base.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.common.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.formedit.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.inlinedit.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.custom.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.fmatter.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.searchFilter.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.jqueryui.js"></script> <!--<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/js/i18n/grid.locale-en.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/js/jquery.jqGrid.min.js"></script>--> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { var mydata = [ {id:"2",invdate:"2007-10-02",name:"clicking me increases form height clicking me increases form height test2 sdfsdfsd dfksdfkj sdfjksdfjk sdsdl sdklfsdjklf dsflsdl sdlfsdfklj lsdlf sdlsdfklsdjlk sdfsdlfkjsd sflsdfkjsdfs sdfsjdfklsdklfj fsdjflsdfj",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"} ]; var grid = $("#list"); grid.jqGrid({ data: mydata, datatype: "local", colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', key: true, width:70, sorttype:"int"}, {name:'invdate',index:'invdate', width:90, sorttype:"date", editable: true}, {name:'name',index:'name', width:100, editable: true, edittype: 'textarea', wrap: 'on', editoptions: { wrap : "on", style : "width:30px" } }, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", editable: true}, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable: true}, {name:'total',index:'total', width:80,align:"right",sorttype:"float", editable: true}, {name:'note',index:'note', width:150, sortable:false} ], pager:'#pager', rowNum: 10, rowList: [5, 10, 20, 50], sortname: 'id', sortorder: 'asc', viewrecords: true, height: "100%", caption: "Custom Navigation to Top Toolbar" }); grid.jqGrid('navGrid','#pager',{add:false,del:false,search:false,refresh:false, edit: false, view: true}, { beforeShowForm: function(form) { // "editmodlist" var dlgDiv = $("#editmod" + grid[0].id); var parentDiv = dlgDiv.parent(); var dlgWidth = dlgDiv.width(); var parentWidth = parentDiv.width(); var dlgHeight = dlgDiv.height(); var parentHeight = parentDiv.height(); // TODO: change parentWidth and parentHeight in case of the grid // is larger as the browser window dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px"; dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px"; } }); }); //]]> </script> </head> <body> <table id="list"><tbody><tr><td/></tr></tbody></table> <div id="pager"/> </body> </html>
+4
source share
1 answer

Yes, Andrus, this is exactly the same IE9 error I posted today: this error report . The bug was fixed in the main grid in jqGrid 4.0, but you found another place where the exact same problem exists.

To fix the problem, I suggest the following. In the view form where the error occurs, we check if the height value of the form is 'auto' , and the code is executed under IE9. In this case, we will change the height: 'auto' setting to height: '100%' :

 grid.jqGrid('navGrid', '#pager', {view: true}, {}, {}, {}, {}, { beforeShowForm: function ($form) { if ($.browser.msie && $.browser.version.slice(0,3) === '9.0' && $form[0].style.height === 'auto') { $form[0].style.height = '100%'; } }});

See the demo for error correction ( here you can check the error in IE).

UPDATED : I looked at the viewGridRow source code and found a lighter workaround. You just need to use (see demo )

 { dataheight: '100%' }

instead of the default dataheight: 'auto' . By the way, I did not find in the jqGrid code a place where the height parameter will be used. It seems now you should use the dataheight parameter.

If I found enough time, I would post a bug to Microsoft as an official support request. My previous expiration was always the same: MS confirmed the error by confirming that my request was free: I do not need to pay for the request. On the other hand, it takes time to create a clear example and describe the problem. Therefore, I have to invest my time and "for free." In addition, the error will usually not be fixed in the current product (IE9) and will probably be fixed in the next version of IE (IE10). In such a situation, writing error reports is not very attractive. :-)

+3
source

Source: https://habr.com/ru/post/1385380/

More articles:


All Articles