为什么 free-jqgrid 的 editoptions 属性中的 size 属性没有得到尊重？答案

【问题标题】：Why size property in editoptions property of free-jqgrid doesn't get honored?为什么 free-jqgrid 的 editoptions 属性中的 size 属性没有得到尊重？
【发布时间】：2018-04-19 18:13:09
【问题描述】：

free-jqgrid 列模型的editoptions 属性的HTML size 属性设置后，并不会按原样修改相关的输入宽度元素。

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

当我从 jqgrid 4.6.0 迁移到 free-jqgrid 14.15.4 时，此属性应该像以前一样工作，这一点很重要为了保持编辑对话框的布局不被修改。

你可以看到一个JSFiddlesn-p 的代码。

在该代码中，第 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>

【问题讨论】：

标签： jqgrid free-jqgrid

【解决方案1】：

通过在 css/ui.jqgrid.css 文件中覆盖 .FormElement 类的 width 属性设置来解决问题.ui-jqdialog-content 类的方式如下：

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

可以看到修改后的JSFiddle代码

说明

.FormElement类的属性设置jqgrid和free-jqgrid是有区别的

/* 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 来解决，如前所示。

【讨论】：