free-jqgrid中editoptions的size属性为何未按预期生效？

我之前也碰到过这个坑！free-jqGrid的编辑对话框默认用了一套响应式CSS布局，会强制让输入框宽度占满父容器的可用空间——所以你设置的size属性甚至直接写的width属性，虽然在调试工具里能看到存在，但会被默认样式覆盖，视觉上完全没变化。

给你几个实用的解决办法：

方法1：用内联style直接指定宽度 #

内联样式的优先级比全局CSS高，能直接突破默认布局限制，直接在editoptions里配置即可：

colModel: [
    {
        name: 'username',
        label: '用户名',
        editoptions: {
            style: 'width: 180px;' // 这里设置你想要的具体宽度
        }
    }
]

方法2：自定义CSS类复用样式 #

如果多个输入框需要统一宽度，建议写个自定义CSS类，通过editoptions的class属性引用，这样更便于后续维护：
首先在页面中添加CSS样式：

.jqgrid-edit-input-small {
    width: 120px !important;
    /* 加!important确保覆盖jqGrid的默认样式 */
}

然后在列模型里配置引用：

colModel: [
    {
        name: 'age',
        label: '年龄',
        editoptions: {
            class: 'jqgrid-edit-input-small'
        }
    }
]

方法3：全局调整编辑表单输入框样式 #

如果你想让所有编辑对话框的输入框都不用占满宽度，可以修改jqGrid的默认UI样式，找到对应的CSS选择器调整：

.ui-jqdialog-content .EditTable input[type="text"] {
    width: auto !important;
    /* 也可以设置固定值，比如width: 200px !important; */
}

注意这个方法会影响所有编辑表单的输入框，按需使用。

另外补充下：HTML的size属性是基于字符数量的，本身就不太精确，在现代CSS布局里很容易被width样式覆盖，所以直接用CSS控制宽度是更可靠的方式。

内容的提问来源于stack exchange，提问作者Romualdo Caruso