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 bigger.

How to fix this so that date field width in toolbar search is not wider than its column and will not become wider than column on resize ?

Testcase is in http://jsfiddle.net/yt6L6p61/

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' }
        ]
    },
initDateHtmlSearch = function (elem){
  $(elem).attr("type", "date");
},

DateTemplate = {
    sorttype: 'date',
    formatter: 'date',
    formatoptions: {
        srcformat: "Y-m-d",
        reformatAfterEdit: true
    },
    editoptions: {
        maxlength: 10,
        size: 10,
//        dataInit: initDateEdit
    },
    editable: true,
    searchoptions: {
        sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
        dataInit: initDateHtmlSearch,
        size: 10,
        attr: { size: 10 }
    }
},

    $grid = $("#categorysummary");

$grid.jqGrid({
    url: "/echo/json/",
    datatype: "json",
    mtype: "POST",
    postData: {
        json: JSON.stringify(serverResponse)
    },
    colNames: ["Id", "Active", 'Second'],
    colModel: [
        { name: 'Id', hidden: true },
        { name: 'IsActive', template: DateTemplate, width:90
        },
        { name: 'Second', width:85
        }

        ],
    jsonReader: {
        id: 'Id',
        repeatitems: false
    },
    viewrecords: true
}).jqGrid("filterToolbar");

html:

<div class="container">
    <table id="categorysummary"></table>
</div>

Note that second column in testcase behaves as expected: it is not wider than its column width.

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