How to make html5 date field in search toolbar to respect column width

Question

Free jqgrid is used with Bootstrap 3. Toolbar search contains html5 date field. Date field width is bigger than column width. If column is resized, date field width is still

Answer 1

Examine the modified demo http://jsfiddle.net/OlegKi/10qwgejj/4/ which have the following code

var serverResponse = {
        "page": "1",
        "records": "3",
        "rows": [
            { "Id": "1", IsActive: "2015-01-09" },
            { "Id": "2", IsActive: "2015-01-05" },
            { "Id": "3", IsActive: "2015-01-21" }
        ]
    },    
    dateTemplate = {
        sorttype: "date",
        formatter: "date",
        formatoptions: {
            srcformat: "Y-m-d",
            reformatAfterEdit: true
        },
        editoptions: {
            maxlength: 10,
            size: 10
        },
        editable: true,
        searchoptions: {
            sopt: ["eq", "ne", "lt", "le", "gt", "ge"],
            size: 10,
            clearSearch: false,
            attr: { size: 10, type: "date", style: "width:11em;" }
        }
    },
    $grid = $("#categorysummary");

$grid.jqGrid({
    url: "/echo/json/",
    datatype: "json",
    mtype: "POST",
    postData: {
        json: JSON.stringify(serverResponse)
    },
    colNames: ["Active", "Second"],
    colModel: [
        { name: "IsActive", template: dateTemplate, width: 125 },
        { name: "Second", width: 85 }
    ],
    jsonReader: {
        id: "Id",
        repeatitems: false
    },
    viewrecords: true
}).jqGrid("filterToolbar");

and additional CSS rule, which fix the problem existing because of the usage of Bootstrap CSS

.ui-search-table input[type=date] {
    line-height: normal;
}

UPDATE: One can resize the input[type=date] after resizing the column. See http://jsfiddle.net/OlegKi/10qwgejj/8/ which use additionally

resizeStop: function (newWidth, iCol) {
    var colModel = $(this).jqGrid("getGridParam", "colModel");
    if (colModel[iCol].name === "IsActive") {
        $("#gs_IsActive").width(newWidth - 7); // - padding
    }
}