为什么 size 属性 in editoptions 属性 of free-jqgrid 没有得到尊重？

Question

当设置了 free-jqgrid 列模型的编辑选项属性的 HTML 大小属性时，它不会按应有的方式修改相关的输入宽度元素。

无论您在 editoptions 中设置的大小值是多少，添加或编辑对话框中的输入元素宽度都保持不变，在包含它的对话框中具有可能的最大宽度。
值得注意的是，如果您使用浏览器检查工具检查 HTML 元素，它具有您设置的宽度属性。

当我从 jqgrid 4.6.0 迁移到 free-jqgrid 14.15.4 时，这个属性应该像以前一样工作，以保持编辑对话框的布局不变。

您可以看到 JSFiddle 代码片段。

在该代码中，第 6 行将字段 id 的大小设置为 3 个字符。尝试编辑任何记录时，可以看到所有输入字段都具有相同的宽度，宽度尽可能宽到包含对话框的右边距。

如何定义 free-jqgrid 的添加或编辑对话框中的输入字段大小？

$(function() {
  "use strict";
  $("#grid").jqGrid({
      colModel: [{
          name: "id",
          width: 20,
          editable: true,
          editoptions: {
            size: 3 // doesn't get honored
          }
        },
        {
          name: "firstName",
          width: 200,
          editable: true
        },
        {
          name: "lastName",
          width: 200,
          editable: true
        }
      ],
      data: [{
          id: 10,
          firstName: "Angela",
          lastName: "Merkel"
        },
        {
          id: 20,
          firstName: "Vladimir",
          lastName: "Putin"
        },
        {
          id: 30,
          firstName: "David",
          lastName: "Cameron"
        },
        {
          id: 40,
          firstName: "Barack",
          lastName: "Obama"
        },
        {
          id: 50,
          firstName: "François",
          lastName: "Hollande"
        }
      ],
      pager: true,
      pgbuttons: false,
      pginput: false,
      viewrecords: true,
      pagerRightWidth: 90
    })
    .jqGrid('navGrid', {
      edittext: 'Edit',
      addtext: 'Add',
      deltext: 'Del',
      search: false,
      view: true,
      viewtext: 'View',
      refresh: true,
      refreshtext: 'Refresh'
    });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
<table id="grid"></table>
<div id="pager"></div>

Answer 1

问题已通过在 css/ui.jqgrid.css 文件中重写 width 属性在 .ui-jqdialog-content class 中设置 .FormElement class以下方式：

.ui-jqdialog-content .FormElement {
    width: initial;
}

可以看到修改后的JSFiddle代码

说明

jqgrid 和 free-jqgrid 在设置 .FormElement[ 的属性时存在差异=35=] class

/* jqgrid 4.6.0 css/ui.jqgrid.css line 112 */ .ui-jqdialog-content input.FormElement {padding:.3em} /* free-jqgrid 4.15.4 css/ui.jqgrid.css line 935 */ .ui-jqdialog-content .FormElement { width: 100%; box-sizing: border-box; }

行 width: 100% 使编辑对话框中的所有输入尽可能宽，忽略 size 属性.
这可以通过覆盖 witdh: initial 来解决，如前所示。

为什么 size 属性 in editoptions 属性 of free-jqgrid 没有得到尊重？

Why size property in editoptions property of free-jqgrid doesn't get honored?

jqgrid

free-jqgrid