JqGrid - how to make a transparent search button visible?

Question

I have a filter toolbar in my JqGrid and the Clearfield "x" hyperlink is not displayed. There is not enough space for the ui-search-clear search box. If I could control the size of the input text field for searching inside the cell using the ui-search-input class, then it would show. I would think that this would work by default. So how can I fix this? My grid is defined as follows:

var populateGrid = function (data) {
    var grid = $("#grid");
    grid.jqGrid({
        data: data,
        colNames: ["No", "Company", "Trade", "Recommendation", ""],
        colModel: [
            { name: "AssessmentNo", label: "AssessmentNo", width:80, align:"center" },
            { name: "Company", label: "Company", width:400, searchoptions: { sopt: ["cn"] } },
            { name: "Trade", label: "Trade", width: 220, searchoptions: { sopt: ["cn"] } },
            { name: "Recommendation", label: "Recommendation", width: 150 },
            { name: "Links", label: "Links", search: false, align: "center" }
        ],
        cmTemplate: { width: 100, autoResizable: true },
        loadonce: true,
        forceClientSorting: true,
        rowNum: 20,
        pager: "#pager",
        gridview: true,
        ignoreCase: true,
        shrinkToFit: false,
        rownumbers: true,
        sortname: "AssessmentNo",
        viewrecords: true,
        sortorder: "asc",
        height: "100%"
    });

    grid.jqGrid("filterToolbar", {
        beforeSearch: function () {
            return false; // allow filtering
        }
    }).jqGrid("gridResize");
}

And my toolbar looks;

Answer 1

I found a problem. One of my CSS stylesheets had the specified setting:

table {
    margin: 1em;
    border-collapse: collapse;
    table-layout: inherit;
}

, , , , .

Answer 2

 grid.jqGrid({

}).navGrid('#grid', {search: true}

: true filterGrid

Answer 3

I ran into the same problem, but only when jQgrid is displayed as a subnet. The cell style of the table containing the filter reset icon was set to one pixel. The following jQuery solved the problem with jqGrid 4.15.5 - for free:

$("td.ui-search-clear").attr('style', 'width:10px;');