0

I have a JQGrid which have a navgrid that its not showing as I want. There are some buttons that look weird, as shown in the following picture:

jqgrid navgrid style issue

As you can see, the number is not completely displayed, and the button that is besides the number is cutted too. Also, I want to reduce the size of the textbox that show the page number, which is too big, and the size of the textbox that have that visual problem.

here is the code of my view:

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

Anyone knows what can be done here?

Community
  • 1
  • 1
Vito
  • 718
  • 4
  • 16
  • 37
  • 1
    Could you includes correct picture? Which other CSS you included (Bootstrap, ASP.NET 3.0, ...)? – Oleg Nov 15 '13 at 06:44
  • I corrected the picture problem, I'm using this styles:css/flick/jquery-ui-1.8.16.custom.css, jqgrid/css/ui.jqgrid.css and Twitter Bootstrap – Vito Nov 17 '13 at 22:00
  • Look at [the old answer](http://stackoverflow.com/a/12298889/315935). It should be exact answer on your question. If it don't solve your problem you should provide the demo (in jsfiddle.net for example) which demonstrates the problem and which shows which products (jQuery, jqGrid) which you use. – Oleg Nov 19 '13 at 06:43
  • Thanks Oleg, you are amazing! using the style of the other answer solve my problem. Please post it as an answer to vote it up. – Vito Nov 22 '13 at 04:01

1 Answers1

1

I suppose that you have conflict with Twitter Bootstrap CSS which you included too. To fix the problem you have to add CSS style described in the answer which reset width of the controls to width: auto; and reset some other CSS settings.

By the way you can consider to use Font Awesome icons additionally. See another answer which describes details.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798