why won't my <div> resize with javascript when I tell it to?
I have a <div> element that contains a table, which I want to resize to the maximum viewport height - 70 px. The reason is that I want the header to stay in one place, and the table to scroll independantly. I can't use iframes for that, since there is complicated javascript interacting with the table. I therefore have to use a <div> and set it's overflow value to scroll. My problem is that the container wont resize when I tell it to. The container looks like this:
<div class="tableContainer" id="tblCont">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="mainTbl" class="mainTable">
<tr clas开发者_开发百科s="row_a" id="1">
<td>id: 1</td>
</tr>
</table>
</div>
The CSS for my tableContainer class is as follow:
.tableContainer
{
overflow: scroll;
/*height: 400px; -- this was just to see if the concept works - and this seems to work fine */
}
Lastly, here is the javascript that is supposed to set the height of the table container:
<script type="text/javascript">
var tbc = document.getElementById("tblCont");
var h = Math.round((window.innerHeight)-(70))+"px";
tbc.style.height = h;
</script>
I even tried setting a fixed height with
tbc.style.height = "50px";
but that also does not work.
Any ideas?
Your script is being called before your DOM elements exist. You need to call your script with an onload event handler, and put your script in a function:
<script type="text/javascript">
function setHeight() {
var tbc = document.getElementById("tblCont");
var h = Math.round((window.innerHeight)-(70))+"px";
tbc.style.height = h;
}
</script>
<body onload="setHeight()">
....
I don't think the javascript gets excecuted. I wrapped it inside an init function and it works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
.tableContainer
{
overflow: scroll;
/*height: 400px; -- this was just to see if the concept works - and this seems to work fine */
}
</style>
<script type="text/javascript">
function init()
{
var tbc = document.getElementById("tblCont");
var h = Math.round((window.innerHeight)-(70))+"px";
document.getElementById('test').onclick = function()
{
tbc.style.width = "40px";
}
}
window.onload = init;
</script>
</head>
<body>
<form>
<input id="test" type="button" value="test" />
</form>
<div class="tableContainer" id="tblCont">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="mainTbl" class="mainTable">
<tr class="row_a" id="1">
<td>id: 1</td>
</tr>
</table>
</div>
</body>
</html>
Try two things:
First, if you didn't already, comment out the var h line and then set the height manually:
<script type="text/javascript">
var tbc = document.getElementById("tblCont");
//var h = Math.round((window.innerHeight)-(70))+"px";
tbc.style.height = "50px";
</script>
Second, try alerting out the h variable instead of setting the height:
<script type="text/javascript">
var tbc = document.getElementById("tblCont");
var h = Math.round((window.innerHeight)-(70))+"px";
alert(h);
//tbc.style.height = "50px";
</script>
My guess is that the problem is with how h is getting set, which is then killing anything after it.
I would highly recommend you look at a third party Grid solution such as the Data Grid from the Dojo toolkit.
From experience, I can say that building a highly-functional data grid from scratch in DHTML is very difficult and making it cross browser compatible is just not fun.
加载中,请稍侯......
精彩评论