CODEWITHSUNDEEP
jqueryjquery-uijqgridfree-jqgrid
jeffery_the_wind
jeffery_the_wind

Reputation: 18198

free-jqgrid pager not fitting correctly

I've been using free jqGrid for years. It is strange that today I am setting up a simple template for a colleague and its just a strange issue. The pager is rendered with a very large height. I will post my code where and see the attached screen shot.

<html>
    <head>
        <!-- jQuery -->
        <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>

        <!-- jquery-ui -->
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

        <!-- jqGrid -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.3/css/ui.jqgrid.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.3/jquery.jqgrid.min.js"></script>
    </head>
    <body>
        <!-- this is the HTML element for the grid UI -->
        <div>
            <table id="grid"></table>
        </div>

        <script type="text/javascript">

        /*
         * Everything inside this function is called after page is done loading
         */
        jQuery(function($){

            /*
             * This is how we setup and configure the grid
             * match the ID of the HTML element with CSS style selector
             */
            $('#grid').jqGrid({
                url:'/phpAJAX/Master/master_grid_v1.php',  //url of data script
                width: 500,
                height: 300,
                datatype: 'xml',
                mtype: 'POST',
                postData:{
                    'arg1':'marks_jqgrid_example'  //tells the script it your database
                },
                colNames:[ //number of column names has to match number of colModel fields
                    'id',
                    'String field (field1)',
                    'Integer Field (field2)'
                ],
                colModel:[  //this is the main setup for each field
                    {name: 'id', hidden: true },
                    {name: 'field1', editable: true },
                    {name: 'field2', editable:true }
                ],
                sortname: 'field1', //the name of the sort field
                sortorder: 'asc', //ascending or descending
                caption: 'Flats or Plates Available',
                pager: true,
                gridview: true,
                onSelectRow: function(id){
                    //do something special when you select a row
                    return;
                },
                rowNum: 10,  //how many rows to show
            })

        })

        </script>
    </body>
</html>

It looks like the table with class ui-pg-table is getting a height: 100% styling that is causing the problem. If I remove that then the height of the pager returns to the expected.

enter image description here

Upvotes: 0

Views: 317

Answers (1)

Oleg
Oleg

Reputation: 221997

You should verify that the document starts with

<!DOCTYPE html>

before <html> element.

Upvotes: 2

Related Questions