个人中心
gpt4 book ai didi

css - 如何防止在 jqGrid 中的 Internet Explorer 9 中每次单击时表单高度增加

转载 作者：行者123 更新时间：2023-11-28 08:43:16 25 4
gpt4 key购买 nike

在IE9中，每次点击表单中的某个地方都会增加表单高度。我使用 Oleg jqGrid 示例来创建测试用例。

重现步骤:

  1. 在 Internet Explorer 9 中打开以下页面
  2. 点击文本的第一行'clicking me increases form height'使其变为黄色
  3. 点击左下角查看记录按钮
  4. 单击表单中的“单击我会增加表单高度”文本

观察到:

每次点击都会增加 Internet Explorer 9 中的表单高度。如何解决这个问题？

<!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>

最佳答案

是的，安德鲁斯，它与我今天发布给您的引用 IE9 错误完全相同:this bug report .该错误已在 jqGrid 4.0 的主网格中修复，但您发现了另一个地方存在完全相同的问题。

为了解决这个问题，我提出以下建议。在报错的View窗体中测试窗体的height值是否为'auto'，代码在IE9下运行。在这种情况下，我们会将设置 height: 'auto' 更改为 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%';
            }
        }});

参见 the demo演示错误修复(here 可以在 IE 中测试错误)。

已更新:我查看了 viewGridRow 的源代码并找到了更简单的解决方法。应该只使用(参见 the demo )

{ dataheight: '100%' }

设置而不是默认的 dataheight: 'auto' 设置。顺便说一下，我没有在 jqGrid 的代码中找到任何使用 height 参数的地方。看来，现在应该改用 dataheight 参数。

如果我有足够的时间，我会将错误作为官方支持请求发布给 Microsoft。我以前的过期总是一样的:MS 确认了这个错误，因为确认我的请求是免费的:我不需要为请求付费。另一方面，创建清晰的示例并描述需要时间的问题。所以我应该投入我的时间并且“免费”。此外，该错误通常不会在当前产品 (IE9) 中修复，可能会在下一版本的 IE (IE10) 中修复。在这种情况下，错误报告的编写就没有吸引力了。 :-)

关于css - 如何防止在 jqGrid 中的 Internet Explorer 9 中每次单击时表单高度增加，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8434810/

25 4 0
文章推荐： css - jstree 节点样式
文章推荐： javascript - 我可以重写 dojo/store/JsonRest API 方法吗？
文章推荐： css - css 位置如何影响元素的宽度/高度？
文章推荐： jquery - 是否可以使用 Easing slideToggle 一个 div 并设置一个最小高度？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com