У меня есть JQGrid, у которого есть navgrid, который не отображается, как я хочу. Есть несколько кнопок, которые выглядят странно, как показано на следующем рисунке:
Как вы можете видеть, номер не отображается полностью, а кнопка, которая помимо номера, тоже вырезана. Кроме того, я хочу уменьшить размер текстового поля, который показывает слишком большой размер страницы и размер текстового поля, который имеет эту визуальную проблему.
вот код моего взгляда:
<script type="text/javascript">
$(document).ready(function (){
jQuery("#list").jqGrid({
url: 'http://localhost/ProyectoNetbeans/CodeIgniter_2.1.3/index.php/MedioInformativo_controller/loadData',
mtype : "post", //Ajax request type. It also could be GET
datatype: "json", //supported formats XML, JSON or Arrray
colNames:['Indice','Descripción'], //Grid column headings
colModel:[
{name:'indice', index:'indice', editable:true, hidden:true, edittype:'text'},
{name:'descripcion', index:'descripcion', editable:true, edittype:'text'}
],
pager: '#pager',
width: 900,
rowNum:10,
rowList:[15,30],
sortname: 'indice',
reloadAfterSubmit: true,
sortorder: 'asc',
viewrecords: true,
postData: {descripcion:"descripcion"},
caption: 'Medio informativo',
onSelectRow: function(id)
{
var dataFromCellByColumnName="";
var index=$("#list").getGridParam("selrow");
var rowId = jQuery('#list tr:eq('+index+')').attr('ID');
var dataFromTheRow = jQuery('#list').jqGrid ('getRowData', rowId);
dataFromCellByColumnName = jQuery('#list').jqGrid ('getCell', rowId, 'indice');
setIndice(dataFromCellByColumnName);
}
}).navGrid('#pager',{edit:true,add:true,del:true},
{//EDITAR
},
{//AGREGAR
jqModal:false,
reloadAfterSubmit:true,
savekey: [true,13],
drag: true,
closeOnEscape:true,
closeAfterAdd:true,
url:"http://localhost/ProyectoNetbeans/CodeIgniter_2.1.3/index.php/MedioInformativo_controller/addData",
beforeSubmit: function(postdata, formid){//valida que no halla errores en la insercion de datos
//alert(postdata.Pais);//imprime lo que se mando en el texto
if (postdata.descripcion=="")
{
return [false,'DESCRIPCION EN BLANCO, INSERTE UNA DESCRIPCION'];
}
else if (postdata.descripcion.length>50)
{
return [false,'NUMERO DE CARACTERES PARA DESCRIPCION EXCEDIDO, MAXIMO=50'];
}
else
{
return [true,'EXITO']; // no error
}
}
},
{// DELETE
},
{multipleSearch : false}, // enable the advanced searching
{closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/
);
});
</script>
Кто-нибудь знает, что можно сделать здесь?
Я полагаю, что у вас есть конфликт с Twitter Bootstrap CSS, который вы тоже включили. Чтобы исправить проблему, вы должны добавить стиль CSS, описанный в ответе, который устанавливает width
элементов управления в width: auto;
и сбросить некоторые другие настройки CSS.
Кстати, вы можете также использовать шрифты Awesome. См. Другой ответ, который описывает детали.