jQuery Grid Plugin - jqGrid - Topic: height issue, navgrid/pager shows at bottom of window.... http://www.trirand.com/blog/?page_id=393/help/height-issue-navgridpager-shows-at-bottom-of-window Simple:Press Version 5.7.5.3 arbello on height issue, navgrid/pager shows at bottom of window.... http://www.trirand.com/blog/?page_id=393/help/height-issue-navgridpager-shows-at-bottom-of-window#p2137 Help http://www.trirand.com/blog/?page_id=393/help/height-issue-navgridpager-shows-at-bottom-of-window#p2137 Thanks Tony.  height:'auto' is the param I was expecting 100% to work as.  When I checked the CSS it all made sense.

Great job!

]]> Fri, 19 Sep 2008 10:17:37 +0300 tony on height issue, navgrid/pager shows at bottom of window.... http://www.trirand.com/blog/?page_id=393/help/height-issue-navgridpager-shows-at-bottom-of-window#p2124 Help http://www.trirand.com/blog/?page_id=393/help/height-issue-navgridpager-shows-at-bottom-of-window#p2124 Hello,

This I will see is standart behavior.

What mean 50% or 100%:

The reason is that without a parent defined height,
the height:100% has nothing to factor 100% percent of,
and will default to a value of height:auto- auto is an "as needed value"
which is governed by the actual content, so that the height:100% will
a=only extend as far as the content demands.

The solution to the problem is by assigning a height value to the parent
container, in this case, the body element. Writing your body stlye to
include height 100% supplies the needed value.

body {
margin:0;
padding:0;
height:100%;
}

Regards

Tony

]]> Fri, 19 Sep 2008 01:17:07 +0300 arbello on height issue, navgrid/pager shows at bottom of window.... http://www.trirand.com/blog/?page_id=393/help/height-issue-navgridpager-shows-at-bottom-of-window#p2118 Help http://www.trirand.com/blog/?page_id=393/help/height-issue-navgridpager-shows-at-bottom-of-window#p2118 Hey all,

I've been playing with jqGrid for a few days and have really come to love it.  One issue I am having however only seems to manifest with my code and in all browsers.  When I set a height: property to any percentage, 50%, 100%, the navbar/pager shows up where I believe it shouldn't.  When I set to 50% height the navbar floats 50% down my screen. When set to 100% it sits on the bottom of the browser window, no matter where my recordset ends.  Any ideas?

Simple recreation based on tutorial code:

<link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jqModal.js" type="text/javascript"></script>
<script src="js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("#list").jqGrid({
    url:'data.cfm',
    datatype: 'json',
    mtype: 'GET',
    colNames:['logonID','lastName'],
    colModel :[
      {name:'logonID',index:'logonID', width:250},
                    {name:'lastName',index:'lastName', width:250} ],
    pager: 'pager',
    rowNum:10,
    height: '50%',
    rowList:[10,20,30],
    sortname: 'logonID',
    sortorder: "asc",
    viewrecords: true,
    imgpath: 'themes/basic/images',
    caption: 'My first grid'
  });
});
</script>

</head>
<body>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

My JSON:

{total:"1",page:"1",records:"2","rows":[{id:"1",cell:["3","singer"]},{id:"2",cell:["4","smith"]}]}

If this has been covered previously, please forgive me.  I've searched the forums and analyzed the examples to no avail.  I am using the 3.2.4 download.

]]> Thu, 18 Sep 2008 19:05:00 +0300