How To Redice The Width Of A JqGrid Filter Toolbar

My grid has only one column, therefore the search toolba very wide (as long as the whole page). I added a css element to reduce the width: .ui-jqgrid .ui-search-table .ui-search-

Solution 1:

To solve the problem you can add searchoptions.attr property with additional attributes in the column where you need to change options of the searching field. For example

searchoptions: { attr: {size:18, maxlength: 18, style: "width:130px;margin-top:1px;"}

See updated demo http://jsfiddle.net/97j49Lot/7/.

I would recommend you additionally to add CSS rule

/* to remove "clear" ("x") part in IE */
.ui-jqgrid .ui-search-table .ui-search-input>input::-ms-clear {
    display: none;
}

to have the same width of input box in IE10 and higher .

UPDATED: To use "clear" functionality of jqGrid one can use searchoptions.clearSearch option. In combination with setting width style on the input box one can use

.ui-jqgrid .ui-search-table .ui-search-clear { width: 100%; }
.ui-jqgrid .ui-search-table .ui-search-clear a { float: left; }

and

searchoptions: {
    clearSearch: true,
    attr: { size:18, maxlength: 18, style: "width:130px;margin-top:1px;" }
}

See http://jsfiddle.net/97j49Lot/8/