Forum
Log In
Home
Topic RSS
19:05
18/09/2008
Offline
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.
01:17
Moderators
30/10/2007
Offline
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
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
75 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
