JQGrid is awesome for displaying data with jQuery, but it doesn't exactly have great documentation.

I'm having a problem with the grid when the grid has only one element to display. For some reason, it's aligning the single row to the bottom rather than to the top.

Here's a picture of a single misaligned row:

Here are the jqgrid options I'm passing in:

jQGridOptions = {
            "recordtext": '{0} - {1} of {2}',
            "url": 'data.json',
            'datatype': 'json',
            'mtype': 'GET',
            'colModel': [
                { 'name': 'Rank', 'align': 'center', 'index': 'Rank', 'sortable': false, 'search': false },
                { 'name': 'Name', 'index': 'Name', 'sortable': false, 'search': true },
                { 'name': 'Score', 'index': 'Score', 'sortable': false, 'search': false }
            ],
            'pager': '#ranking-pager',
            'rowNum': rowsPerPage,
            'altRows': true,
            'scrollOffset': 0,
            'colNames': ["Rank", "Name", "Score"],
            'width': 696,
            'height': 'auto', // '100%',  // 300,
            'page': 1,
            'sortname': 'Rank',
            'sortorder': "asc",
            'hoverrows': true,
            'viewrecords': true,
            'gridComplete': function () {
                $('.ui-jqgrid-bdiv').jScrollPane({ showArrows: true, scrollbarWidth: 17, arrowSize: 17, scrollbarMargin: 0 });

                if (selectedRank !== -1) {
                    selectRank(selectedRank);
                    selectedRank = -1;
                }
            }
            'jsonReader': {
               'repeatitems': false,
               id : 'Rank'
        }
    };

As requested, here's the result from data.json:

{
    "page":1,
    "total":1,
    "records":1,
    "rows":  [{
                  "Name":"Gil Agostini",
                  "Score":94,
                  "Rank":1
             }]
}

Call to jQGrid:

$(document).ready(function () {
        $("#ranking-table").jqGrid(jQGridOptions);
});

Html:

 <div style="float: left;">
                <div class="hvy-border1">
                    <div class="hvy-border2">
                        <div class="hvy-top-left hvy-corner">
                            <div>
                                <!-- -->
                            </div>
                        </div>
                        <div class="hvy-top-right hvy-corner">
                            <div>
                                <!-- -->
                            </div>
                        </div>
                        <div class="clear">
                            <!-- -->
                        </div>
                        <div id="table-and-pager" style="margin: 3px;">
                            <table id="ranking-table" class="scroll" cellpadding="0" cellspacing="0" style="height: 300px">
                            </table>
                            <div id="ranking-pager" class="scroll" style="text-align: center;">
                            </div>
                        </div>
                        <div class="clear">
                            <!-- -->
                        </div>
                        <div class="hvy-bottom-left hvy-corner">
                            <div>
                                <!-- -->
                            </div>
                        </div>
                        <div class="hvy-bottom-right hvy-corner">
                            <div>
                                <!-- -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Can anyone give me any clue what I maybe doing wrong here?

How do I get the row to align to the top rather than the bottom?