Free jqgrid используется с Bootstrap 3. Поиск на панели инструментов содержит поле даты html5. Ширина поля даты больше ширины столбца. При изменении размера столбца ширина поля даты будет еще больше.

Как это исправить, чтобы ширина поля даты при поиске на панели инструментов не была шире ее столбца и не стала шире столбца при изменении размера?

Testcase находится в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>

Обратите внимание, что второй столбец в тестовом сценарии ведет себя как ожидалось: он не шире ширины своего столбца.