changing div height with javascript makes div with more than 100%

[atma86]

what up people, i'm writing an app which includes a page that has 2 divs side by side. the page is set up to fill the table containing the divs to 100% of the width of the pages. I want the height of these divs to also move with the resize of the page but also keep in prospective the other table space above and below the divs.

My solution to this was to manipulate the height with javascript using the method below. this works however, the width is thrown out of wack and goes beyond 100% of the page. Am i missing something in the script that is causing this? The problem only exists in internet exlporer, firefox it is fine.

Also below is the style i used:


function resizeTreeDivs( LTree, RTree){
var winHeight = document.docume ntElement.clien tHeight;
var appHeight = winHeight -189;
var parDivL = LTree.parentNod e;
var parDivR = RTree.parentNod e;

parDivL.style.h eight = appHeight+'px';
parDivR.style.h eight = appHeight+'px';
}


.divs {
overflow: auto;
height: 400px;
margin: 0px;
padding: 0px;
position: relative;
left: 0px;
top: 0px;
clear: right;
float: left;
width: 100%;
}

Thanks in advance!
Joe Estes

[b1randon]

what up people, i'm writing an app which includes a page that has 2 divs side by side. the page is set up to fill the table containing the divs to 100% of the width of the pages. I want the height of these divs to also move with the resize of the page but also keep in prospective the other table space above and below the divs.

My solution to this was to manipulate the height with javascript using the method below. this works however, the width is thrown out of wack and goes beyond 100% of the page. Am i missing something in the script that is causing this? The problem only exists in internet exlporer, firefox it is fine.

Also below is the style i used:


function resizeTreeDivs( LTree, RTree){
var winHeight = document.docume ntElement.clien tHeight;
var appHeight = winHeight -189;
var parDivL = LTree.parentNod e;
var parDivR = RTree.parentNod e;

parDivL.style.h eight = appHeight+'px';
parDivR.style.h eight = appHeight+'px';
}


.divs {
overflow: auto;
height: 400px;
margin: 0px;
padding: 0px;
position: relative;
left: 0px;
top: 0px;
clear: right;
float: left;
width: 100%;
}

Thanks in advance!
Joe Estes

Post your full page source so that I can debug, pls.

[atma86]

the source xhtml portion with the problem divs:
-------------------------------------------------------------------

<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr valign="top">
<td width="32" background="ima ges/layout/bdlft.jpg"><img src="images/layout/bdlft.jpg" width="32" height="10" /></td>
<td width="50%">
<div id="roadmapTree Div" class="divs">
<t:tree2 id="roadmapTree " value="#{roadma pTreeBean.treeM odel}" var="_node" varNodeToggler= "t" showLines="fals e" org.apache.myfa ces.tree2.CLIEN T_SIDE_TOGGLE=" true" org.apache.myfa ces.tree2.SHOW_ ROOT_NODE="true " org.apache.myfa ces.tree2.SHOW_ NAV="true">
<ims:tnc entity="${_node }" fieldName="fld1 "/>
<ims:tnc entity="${_node }" fieldName="fld2 "/>
<ims:tnc entity="${_node }" fieldName="fld3 "/>
<ims:tnc entity="${_node }" fieldName="fld4 "/>
<ims:tnc entity="${_node }" fieldName="fld5 "/>
<ims:tnc entity="${_node }" fieldName="fld6 "/>
<ims:tnc entity="${_node }" fieldName="fld7 "/>
<ims:tnc entity="${_node }" fieldName="fld8 "/>
<ims:tnc entity="${_node }" fieldName="fld9 "/>
<ims:tnc entity="${_node }" fieldName="fld1 0"/>
<ims:tnc entity="${_node }" fieldName="fld1 1"/>
</t:tree2>
</div>
</td>
<td width="1" bgcolor="#867F8 7"><img src="images/layout/divider.jpg" width="1" height="1" /></td>
<td width="50%">
<div id="auditTreeDi v" class="divs">
<t:tree2 id="auditTree" value="#{auditT reeBean.treeMod el}" var="_node" varNodeToggler= "t" showLines="fals e" org.apache.myfa ces.tree2.CLIEN T_SIDE_TOGGLE=" true" org.apache.myfa ces.tree2.SHOW_ ROOT_NODE="true " org.apache.myfa ces.tree2.SHOW_ NAV="true">
<ims:tnc entity="${_node }" fieldName="fld1 "/>
<ims:tnc entity="${_node }" fieldName="fld2 "/>
<ims:tnc entity="${_node }" fieldName="fld3 "/>
<ims:tnc entity="${_node }" fieldName="fld4 "/>
<ims:tnc entity="${_node }" fieldName="fld5 "/>
<ims:tnc entity="${_node }" fieldName="fld6 "/>
<ims:tnc entity="${_node }" fieldName="fld7 "/>
<ims:tnc entity="${_node }" fieldName="fld8 "/>
<ims:tnc entity="${_node }" fieldName="fld9 "/>
<ims:tnc entity="${_node }" fieldName="fld1 0"/>
<ims:tnc entity="${_node }" fieldName="fld1 1"/>
</t:tree2>
</div>
</td>
<td width="32" background="ima ges/layout/bdrt.jpg"><img src="images/layout/bdrt.jpg" width="32" height="10" /></td>
</tr>
</table>

again the css is:
------------------------

.divs {
overflow: auto;
height: 400px;
margin: 0px;
padding: 0px;
position: relative;
left: 0px;
top: 0px;
clear: right;
float: left;
width: 100%;
}

and the javascript that manipulates the divs once the page is loaded:
--------------------------------------------------------------------------------------------------

function resizeTreeDivs( LTree, RTree){
//these two trees are spans
var winHeight = document.docume ntElement.clien tHeight;
var appHeight = winHeight -189;
var parDivL = LTree.parentNod e;
var parDivR = RTree.parentNod e;

parDivL.style.m argin = 0+'px';
parDivL.style.w idth = '100%';
parDivL.style.p osition = 'relative';
parDivL.style.p adding = 0+'px';
parDivL.style.l eft = 0+'px';
parDivL.style.t op = 0+'px';
parDivL.style.c lear = 'left';
parDivL.style.o verflow ='auto';
parDivL.style.s tyleFloat = 'left';
parDivL.style.h eight = appHeight+'px';


parDivR.style.m argin = 0+'px';
parDivR.style.w idth = '100%';
parDivR.style.p osition = 'relative';
parDivR.style.p adding = 0+'px';
parDivR.style.l eft = 0+'px';
parDivR.style.t op = 0+'px';
parDivR.style.c lear = 'left';
parDivR.style.o verflow ='auto';
parDivR.style.s tyleFloat = 'left';
parDivR.style.h eight = appHeight+'px';

}


note that the xhtml isn't compiled so the trees won't be visible, however if you fill the divs with a large amount of text or a big image, the div won' t remain encapsulated in 100% of the page but stretches well beyond that
which is infact the problem once the javascript is applied. prior to the javascript, the css does it's job.

thanks again in advance!

Joe Estes

[b1randon]

the source xhtml portion with the problem divs:
-------------------------------------------------------------------

<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr valign="top">
<td width="32" background="ima ges/layout/bdlft.jpg"><img src="images/layout/bdlft.jpg" width="32" height="10" /></td>
<td width="50%">
<div id="roadmapTree Div" class="divs">
<t:tree2 id="roadmapTree " value="#{roadma pTreeBean.treeM odel}" var="_node" varNodeToggler= "t" showLines="fals e" org.apache.myfa ces.tree2.CLIEN T_SIDE_TOGGLE=" true" org.apache.myfa ces.tree2.SHOW_ ROOT_NODE="true " org.apache.myfa ces.tree2.SHOW_ NAV="true">
<ims:tnc entity="${_node }" fieldName="fld1 "/>
<ims:tnc entity="${_node }" fieldName="fld2 "/>
<ims:tnc entity="${_node }" fieldName="fld3 "/>
<ims:tnc entity="${_node }" fieldName="fld4 "/>
<ims:tnc entity="${_node }" fieldName="fld5 "/>
<ims:tnc entity="${_node }" fieldName="fld6 "/>
<ims:tnc entity="${_node }" fieldName="fld7 "/>
<ims:tnc entity="${_node }" fieldName="fld8 "/>
<ims:tnc entity="${_node }" fieldName="fld9 "/>
<ims:tnc entity="${_node }" fieldName="fld1 0"/>
<ims:tnc entity="${_node }" fieldName="fld1 1"/>
</t:tree2>
</div>
</td>
<td width="1" bgcolor="#867F8 7"><img src="images/layout/divider.jpg" width="1" height="1" /></td>
<td width="50%">
<div id="auditTreeDi v" class="divs">
<t:tree2 id="auditTree" value="#{auditT reeBean.treeMod el}" var="_node" varNodeToggler= "t" showLines="fals e" org.apache.myfa ces.tree2.CLIEN T_SIDE_TOGGLE=" true" org.apache.myfa ces.tree2.SHOW_ ROOT_NODE="true " org.apache.myfa ces.tree2.SHOW_ NAV="true">
<ims:tnc entity="${_node }" fieldName="fld1 "/>
<ims:tnc entity="${_node }" fieldName="fld2 "/>
<ims:tnc entity="${_node }" fieldName="fld3 "/>
<ims:tnc entity="${_node }" fieldName="fld4 "/>
<ims:tnc entity="${_node }" fieldName="fld5 "/>
<ims:tnc entity="${_node }" fieldName="fld6 "/>
<ims:tnc entity="${_node }" fieldName="fld7 "/>
<ims:tnc entity="${_node }" fieldName="fld8 "/>
<ims:tnc entity="${_node }" fieldName="fld9 "/>
<ims:tnc entity="${_node }" fieldName="fld1 0"/>
<ims:tnc entity="${_node }" fieldName="fld1 1"/>
</t:tree2>
</div>
</td>
<td width="32" background="ima ges/layout/bdrt.jpg"><img src="images/layout/bdrt.jpg" width="32" height="10" /></td>
</tr>
</table>

again the css is:
------------------------

.divs {
overflow: auto;
height: 400px;
margin: 0px;
padding: 0px;
position: relative;
left: 0px;
top: 0px;
clear: right;
float: left;
width: 100%;
}

and the javascript that manipulates the divs once the page is loaded:
--------------------------------------------------------------------------------------------------

function resizeTreeDivs( LTree, RTree){
//these two trees are spans
var winHeight = document.docume ntElement.clien tHeight;
var appHeight = winHeight -189;
var parDivL = LTree.parentNod e;
var parDivR = RTree.parentNod e;

parDivL.style.m argin = 0+'px';
parDivL.style.w idth = '100%';
parDivL.style.p osition = 'relative';
parDivL.style.p adding = 0+'px';
parDivL.style.l eft = 0+'px';
parDivL.style.t op = 0+'px';
parDivL.style.c lear = 'left';
parDivL.style.o verflow ='auto';
parDivL.style.s tyleFloat = 'left';
parDivL.style.h eight = appHeight+'px';


parDivR.style.m argin = 0+'px';
parDivR.style.w idth = '100%';
parDivR.style.p osition = 'relative';
parDivR.style.p adding = 0+'px';
parDivR.style.l eft = 0+'px';
parDivR.style.t op = 0+'px';
parDivR.style.c lear = 'left';
parDivR.style.o verflow ='auto';
parDivR.style.s tyleFloat = 'left';
parDivR.style.h eight = appHeight+'px';

}


note that the xhtml isn't compiled so the trees won't be visible, however if you fill the divs with a large amount of text or a big image, the div won' t remain encapsulated in 100% of the page but stretches well beyond that
which is infact the problem once the javascript is applied. prior to the javascript, the css does it's job.

thanks again in advance!

Joe Estes

Joe, if you don't want your divs to grow to fit the content you should change your overflow style. The possible values are visible, hidden, scroll and auto. Try hidden or scroll to keep your divs the same size.

[atma86]

i changed it to scroll, and the app still stretches beyond 100% of the page.

again this only happens after i edit the divs with javascript

when the divs are set in the css, everything stay intact at 100% on the page. any suggestions?