jqGrid中过滤器工具栏中的输入宽度似乎太长答案

【问题标题】：width of input in filter toolbar seems to be too long in jqGridjqGrid中过滤器工具栏中的输入宽度似乎太长
【发布时间】：2013-06-10 14:50:59
【问题描述】：

我观察到 jqGrid 的奇怪问题。这个问题是次要的，更多的是与演示而不是功能相关。

当我切换过滤器工具栏时，列的输入宽度不适合列的宽度。其实不止是专栏。

您可以在 http://www.trirand.com/blog/jqgrid/jqgrid.html 的演示中看到相同的问题。

请检查搜索->带有操作的工具栏。加载演示后，请检查索引列的过滤器输入宽度。

或者您可以检查 3.5 版中的新功能->集成搜索工具栏。加载演示后，请检查过滤器输入的宽度。

有什么办法吗？

问候

【问题讨论】：

您在测试中使用的 Web 浏览器。我只能在 Google Chrome 27.0.1453.110 中看到错误的宽度，在 IE10、Firefox 21、Opera 12.15 中看不到任何问题。我在 Opera 12.15 的“搜索”/“带有操作的工具栏”演示中还看到 没有搜索操作。
我使用的是 chrome 27.0.1453.110 m。顺便说一句，我可以通过 Opera 中的操作在搜索/工具栏中看到搜索操作。我正在使用 12.15。
谢谢， Opera 中的问题在清除本地缓存后得到修复。所以这在 jqGrid 中一般来说不是问题，而只是因为在演示中使用了错误的缓存头。我将尝试检查 WebKit（Chrome 和 Safari）中的宽度问题，稍后将发布我如何解决问题的建议。

标签： jqgrid

【解决方案1】：

在我看来，这是 WebKit（Google Chrome 27.0.1453.110 和 Safari）中的一个错误。我不仅可以确认问题，而且可以描述更多hart bug：如果您尝试在“搜索”->“带有操作的工具栏”的搜索工具栏中输入“一些长文本”，您将看到类似的图片

不会看到任何搜索操作。

jqGrid 将内联 style 与 <input> 元素的 width 值设置为 100% 和 WebKit 以错误的方式计算它。作为一种解决方法，我建议添加以下 CSS

.ui-jqgrid .ui-search-table .ui-search-input>input,
.ui-jqgrid .ui-search-table .ui-search-input>select { display: block }

见the demo。

box-sizing: border-box; 的用法或

.ui-jqgrid .ui-search-table .ui-search-input>input,
.ui-jqgrid .ui-search-table .ui-search-input>select {
     display: block;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

另外提高了输入字段的可见性（在我看来）。 The next demo 展示了结果。在我测试演示的所有网络浏览器中，我认为演示看起来都一样。

已更新：我发布了the bug report 的建议。现在（见here）相应的改动已经包含在github上jqGrid的主代码中了，jqGrid的下一个版本（4.5.2以后）不会有更多描述的问题。

【讨论】：

感谢 Oleg 的及时回复。
@isntn：不客气！您能否确认我的建议解决了您项目中的问题？顺便说一句，我把the bug report发给了trirand。
您建议的解决方案似乎适用于文本输入。我还添加了 .ui-jqgrid .ui-search-table .ui-search-input>select { display: block } 因为我有布尔值列。你能帮我处理一下 datepicker 集成列吗？
@isntn：你说得对<select> 我修改了演示。 the last demo 使用日期选择器。你有什么问题？
@isntn：我的答案中也包含了.ui-jqgrid .ui-search-table .ui-search-input>select 规则。