...

View Full Version : Increase/Decrease <div> height to fit in a page



hhk999
07-04-2007, 03:22 PM
Frens ,
i dint have time to go through all posts. i wish someone can help me with this.
1.) i have a page default.aspx with three <div> tags each containing one ASP.Net Controls. namely FavoriteTree,NavigationTree and NavigationTabs.the page width is set to 100%.
2.)I am calling this page in a left navigation frame. who has scrolling=no;
3.)Now the problem is;everything is getting populated from database, when navtabs are more, then content is overflowing and becomes invisible. what i want to achieve is Favorites div tag should have some fixed size, navtree div tag and navtabs div tag should be resizable based on navtabs size.
If NavTabs height is more, then navtree should become less in height and if navtabs height is less then navtree should accumulate the height. but all content should fit in that frame, nothin should b overflow.
you can see Ms Outlook for this. when u scroll tabs then navtree size become bigger/shorter..i want the same behaviour.
How should i manipulate height of <div> to achieve this.

I hope i was clear.
pls help me with this. its urgent.

Jutlander
07-04-2007, 03:42 PM
We need to see some code or better yet, a link to the page.

hhk999
07-04-2007, 04:09 PM
Dear Frend, this is code for default.aspx page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function resize_nav()
{
//var tabs,navtree,navtab,fav;
//tabs = document.getElementById('div1').offsetHeight;
//tabs2 = document.getElementById('div2').offsetHeight;
//var hght;
//hght = document.getElementById('div1').style.height + //document.getElementById('div3').style.height;document.getElementById('div2').style.height //= window.screen.height - hght ;
//alert(totalhght );
}
</script>
</head>
<body dir="rtl" style="margin: 0px; height:100%;width:100%;padding:0px;" scroll="no" onload='resize_nav()'>
<form id="form1" runat="server" style="margin: 0px;height:100%;width:100%">
<div id=div1 style="margin: 0px;height:100%;width:100%">
<div style="height: 100px; width: 100%;">
<radP:RadPanelbar ID="uxFavoritesPanelBar" runat="server" Width="100%" SkinID="panelHeader">
<ItemTemplate>
<radT:RadTreeView ID="uxFavoritesTreeView" runat="server" Skin="rtl" Height="100px"
Width="100%">
</radT:RadTreeView>
</ItemTemplate>
</radP:RadPanelbar>
</div>
<div id=div2 style="min-height: 200px; width: 100%;">
<radP:RadPanelbar ID="uxNavPanelBar" runat="server" Height="200px" Width="100%" SkinID="panelHeader">
<ItemTemplate>
<radT:RadTreeView ID="uxNavTreeView" runat="server" Skin="rtl" Width="100%" Height="200px"
OnNodeClick="uxNavTreeView_NodeClick">
</radT:RadTreeView>
</ItemTemplate>
</radP:RadPanelbar>
</div>
<div id=div3 style="width: 100%;">
<radP:RadPanelbar ID="uxMainPanelBar" runat="server" Width="100%"
OnItemClick="uxMainPanelBar_ItemClick" ExpandMode="SingleExpandedItem" />
</div>
</div>
</form>
</body>
</html>

i hope this helps.
I am using IE6
and problem still not solved. i am trying to write some javascript ,but not working.
awaiting reply
thanks

koyama
07-05-2007, 12:45 AM
We need to see the generated HTML. That means without the ASP stuff.

hhk999
07-05-2007, 12:01 PM
i cant show exactly the generated output bcoz it contains lots of viewstate value.so it will become difficult to analyse.
i have three div tags which has some controls ..who are dynamically populated from DB. so depending upon div3 control's height,set div3's height. and modify div2's height.
pls help

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function resize_nav()
{
//var tabs,navtree,navtab,fav;
//tabs = document.getElementById('div1').offsetHeight;
//tabs2 = document.getElementById('div2').offsetHeight;
//var hght;
//hght = document.getElementById('div1').style.height + //document.getElementById('div3').style.height;document.getElementById('div2').style.height //= window.screen.height - hght ;
//alert(totalhght );
}
</script>
</head>
<body dir="rtl" style="margin: 0px; height:100%;width:100%;padding:0px;" scroll="no" onload='resize_nav()'>
<form id="form1" runat="server" style="margin: 0px;height:100%;width:100%">
<div id=div1 style="margin: 0px;height:100%;width:100%">
<div style="height: 100px; width: 100%;">
</div>
<div id=div2 style="min-height: 200px; width: 100%;">
</div>
<div id=div3 style="width: 100%;">
</div>
</div>
</form>
</body>
</html>

koyama
07-08-2007, 05:19 PM
Please provide some fully functional example code that illustrates the problem. With that last piece of code you gave us all I see is a blank screen?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum