jQuery Grid Plugin - jqGrid

As shown on the edit row example demo , when click  on the "Edit Selected" button, the edit form appear on the left upper corner of the grid.

Also, I see this from the doc :   
"If the top and left off-set properties are not set, the dialog appears at the upper left corner of the grid. Top and left off-sets are in relation to the viewing window, not the grid, so {top:10, left:10} will be indented slightly from the window, and may be nowhere near the grid."

But I got this problem: the edit form displays on the left upper corner of the browser window, and pushes  the grid down on the page. I used the default top and left properties.

My html codes:

<table id="editgrid" class="scroll" cellpadding="0" cellspacing="0"></></table>
  <div id="pager" class="scroll" style="text-align: center;"></div>
  
  <input type="BUTTON" id="bedata" value="Edit Selected" />

And the  code for button on click:

$("#bedata").click(function(){
       var gr = jQuery("#editgrid").getGridParam('selrow');
       if( gr != null ) jQuery("#editgrid").editGridRow(gr,{ height:280, reloadAfterSubmit:false});
       else alert("Please Select Row");
    });

Thanks!

Maggie