Como criar um campo de data html5 na barra de ferramentas de pesquisa para respeitar a largura da coluna
O jqgrid livre é usado com o Bootstrap 3. A pesquisa na barra de ferramentas contém o campo de data html5. A largura do campo de data é maior que a largura da coluna. Se a coluna for redimensionada, a largura do campo de data ainda será maior.
Como corrigir isso para que a largura do campo de data na pesquisa da barra de ferramentas não seja maior que sua coluna e não se torne maior que a coluna no redimensionamento?
O Testcase está emhttp://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>
Observe que a segunda coluna no testcase se comporta conforme o esperado: não é maior que a largura da coluna.