width of input in filter toolbar seems to be too long in jqGrid

Question

I have observed strange issue with jqGrid. The issue is minor and related more to presentation than functionality.

When I toggle filter toolbar, width of input for a column does not fit width of column. Actually, it is more than that of column.

You can see same issue in demos at http://www.trirand.com/blog/jqgrid/jqgrid.html.

Please check for Searching->Toolbar with Operations. Once you load demo, please check width of filter input for column Index.

Or you can check New in version 3.5->Integrated Search Toolbar. Once you load demo, please check width of filter inputs.

Any solution?

Regards

Westerly

Which web browser you use in your tests. I can see wrong width only in Google Chrome 27.0.1453.110 and see no problems in IE10, Firefox 21, Opera 12.15. I see additionally no searching operation in "Searching" / "Toolbar with Operations" demo in Opera 12.15. – Hood

I am using chrome 27.0.1453.110 m. Btw, I can see searching operations in Searching/Toolbar with Operations in Opera. I am using 12.15. – Westerly

Thanks, The problem in Opera are fixed after clearing the local cache. So it's not a problem in jqGrid in general, but just because of usage of wrong caching headers in the demo. I will try examine the problem with width in WebKit (Chrome and Safari) and will post later my suggestion how to fix the problem. – Hood

Answer 1

It seems to me that it's a bug in WebKit (Google Chrome 27.0.1453.110 and Safari). I can not only confirm the problem, but describe more hart bug: if you will try to enter "some long text" in the searching toolbar in "Searching"->"Toolbar with Operations" you will have the picture like

where no searching operation will be seen.

jqGrid set inline style with width value of <input> element to 100% and WebKit caclulate it in a wrong way. As a workaround I suggest to add the following CSS

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

See the demo.

Usage of box-sizing: border-box; or

.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;
}

improves the visibility of the input fields additionally (in my opinion). The next demo demonstrates the results. The demo looks identical in my opinion in all web browsers in which I tested the demo.

UPDATED: I posted the bug report with my suggestion. Now (see here) the corresponding changes are already included in the main code of jqGrid on github and the next version (after 4.5.2) of jqGrid will not have more the described problem.

Hood

Thanks, Oleg, for prompt response. – Westerly

@isntn: You are welcome! Can you confirm that my suggestions fix the problem in your project? By the way, I posted the bug report to trirand. – Hood

Solution you suggested seems to work with text inputs. I also added .ui-jqgrid .ui-search-table .ui-search-input>select { display: block } as I have boolean value column. Can you please help me with datepicker integrated column too? – Westerly

@isntn: You are right with <select> I modified the demos. the last demo uses datepicker. Which problem you have? – Hood

@isntn: I included .ui-jqgrid .ui-search-table .ui-search-input>select rule in my answer too. – Hood

same width issue...but I can see that in your demo that issue is not there. I think, I need to check my code. Thanks, Oleg. – Westerly

@isntn: You are welcome! I can imagine that one could need to add more CSS in the same way. It you would have more information about the problem, please inform me. – Hood

@isntn: See UPDATED part of my answer: the bug is fixed in the main code of jqGrid. – Hood