Free jqgrid wird mit Bootstrap 3 verwendet. Die Suche in der Symbolleiste enthält ein HTML5-Datumsfeld. Die Breite des Datumsfelds ist größer als die Spaltenbreite. Wenn die Spaltengröße geändert wird, ist die Breite des Datumsfelds immer noch größer.

Wie kann dies behoben werden, damit die Breite des Datumsfelds in der Symbolleistensuche nicht breiter als die Spalte ist und beim Ändern der Größe nicht breiter als die Spalte wird?

Testcase ist inhttp: //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>

Beachten Sie, dass sich die zweite Spalte im Testfall wie erwartet verhält: Sie ist nicht breiter als ihre Spaltenbreite.