Исправить стиль Navgrid в JQGrid

0

У меня есть JQGrid, у которого есть navgrid, который не отображается, как я хочу. Есть несколько кнопок, которые выглядят странно, как показано на следующем рисунке:

Изображение 174551

Как вы можете видеть, номер не отображается полностью, а кнопка, которая помимо номера, тоже вырезана. Кроме того, я хочу уменьшить размер текстового поля, который показывает слишком большой размер страницы и размер текстового поля, который имеет эту визуальную проблему.

вот код моего взгляда:

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

Кто-нибудь знает, что можно сделать здесь?

  • 1
    Не могли бы вы включить правильную картинку? Какой другой CSS вы включили (Bootstrap, ASP.NET 3.0, ...)?
  • 0
    Я исправил проблему с изображением, я использую следующие стили: css / flick / jquery-ui-1.8.16.custom.css, jqgrid / css / ui.jqgrid.css и Twitter Bootstrap
Показать ещё 2 комментария
Теги:
jqgrid

1 ответ

1
Лучший ответ

Я полагаю, что у вас есть конфликт с Twitter Bootstrap CSS, который вы тоже включили. Чтобы исправить проблему, вы должны добавить стиль CSS, описанный в ответе, который устанавливает width элементов управления в width: auto; и сбросить некоторые другие настройки CSS.

Кстати, вы можете также использовать шрифты Awesome. См. Другой ответ, который описывает детали.

  • 0
    Спасибо, Олег, это решило мою проблему.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню